Explore the community Forums Lectora Lectora Questions & Answers Clickable media element?

Tagged: , ,

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #364448 Score: 0
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    Hi Jason,

    Have you made any more progress? I haven’t had a ton of time to dig into this, but I was able to fix a couple of issues anyhow.

    I was able to get the blue background to extend beyond the mute button by adding padding-right: 12px; to the div[id^=”audio”] .mejs-container .mejs-controls element at the top of the file.

    And I fixed an issue with the placement of the unmute button. It just needed to have top and left set like the mute button does. There were a couple of small syntax issues that may have been affecting things in some browsers too.

    I’m not seeing the issue of the play button image being offset. I’ve run it in Chrome, FireFox, and IE, and they all look good to me.

    As for adding a replay button, I don’t think you’ll be able to do that via CSS since it doesn’t appear to already be a part of the player. But you might be able to fake it with a button next to the player.

    I have not tried to expand the “media element” to the width of the player yet. It appears to have multiple parts, so I’m thinking that there will likely be several elements that need to be expanded somehow. I hope to get more time to mess around with this tomorrow or later in the week depending… I’m attaching my current edited version of the skin, if it helps at all.

     

    #364504 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    That’s actually perfect! I hadn’t thought to use the padding on the button itself to get that result so this solves one issue that was holding me back from implementing the player.

    The next step is tab focus, since I need to verify accessibility and there’s some work for me to do there. In IE, I couldn’t tab past the CC button, but could in Firefox. However, the same thing happens with the default player

    In terms of the button offset, it’s in reference to the clickable area that triggers the action. It’s slightly off the button image position – it’s the perfectionist in me that wants to correct it, but it doesn’t affect appearance or overall functionality. I found it when I inspected the element using Firefox when highlighting the mejs-button mejs-playpause-button mejs-play class in the CSS. I attached a screen shot, but it’s definitely not a show stopper.

    Thanks for the tremendous help on this!

    • This reply was modified 3 years, 3 months ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: added information about accessibility issue
    #364591 Score: 0
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    Well I’m glad that much was a help! I did get a little more of the puzzle figured out this afternoon. I got the black div and the div containing the closed caption text to expand to the width of the player controls. The latest version is attached. Look for div[id^=”mep”]  and  div[class=”mejs-captions-layer mejs-layer”].

    As for that play button thing, top and left did nothing, and adding a margin or padding threw off other elements in the controls. The “hot” area for the play button still seems to be okay anyhow if you do a sneak-up mouse over on it (at least it is for me). Maybe that one is not worth trying to fix.

    Now for the not-so-good news. The issue with not being able to tab past the CC button in IE is likely related to a genuine bug that is still in the backlog. I brought it to the attention of the Lectora product manager today, and he’s trying to get it bumped up the list to be fixed. There could possibly be some sort of javascript workaround for it, but I wouldn’t know right now what that would be. That’s going to take a lot more digging since I don’t even know what’s causing it yet. Even if I did, I’m not certain I could fix it.

    The only other alternative I could recommend right now would be to not use the controller at all and make your own set of controls via buttons, progress bar, etc. There was a bit of a discussion about doing that in the comments here: https://community.trivantis.com/shared-content/closed-captioning-with-webvtt/

    I’d hate for you to have to go that route since you’ve already put so much effort into making your own skin! But if that’s the route you need to take, then I’d be happy to help you with that as well, if you need it.

     

    #364797 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    The not-so-good-news isn’t really all that bad 🙂 I started developing the skin to replace a set of customized button controls that required variables, action groups, conditionals, etc. Since I’m using a standard template for the large part of my curriculum, I know in the long run having a skin will make adding audio to my courses much faster.

    In the meanwhile, I’ve attached the file with both the skin based on your edits and the customized default player with the custom buttons to control the audio.

    The one thing I couldn’t nail down with the skin is changing the background of the captions to black, which I do have in the non-skin customizations. The CSS I use to modify the default player does set the text background to black, but I haven’t been able to integrate it in the skin CSS yet. I’d love to do that to avoid what my partner calls “code bloat” 🙂

    Re: the caption button issue – It wouldn’t be too challenging to remove the caption button altogether from the skin and player (see the player with my custom buttons). From there, I could use the custom CC button over the player. The consideration there would be tab order, since the CC button would be separate.

    Thanks again for all the help! I’m digging in on the replay/restart button as well and may even contact the mediaelement developer forum.

    #364951 Score: 0
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    This is really nice, Jason! I agree that using a custom skin will make development with audio go much quicker! I am glad you are willing to work around that bug for now.

    To turn the highlight color on the text to solid black instead of translucent black, adding this to your custom skin CSS should do it.

    .mejs-captions-text {
    background: #000;
    }

     

    #364956 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Wow, lot’s of good things happening in this thread while I was away. Congrats Jason. You built a nice skin. Wendy, I think Jason’s is just looking to change the font color to black, not the background.

    .mejs-captions-text {
    color: #000;
    }

    Add the above to your first added CSS sheet. No bloat 😉

    #364959 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    I see. I am mistaken, Jason was looking to do exactly what you provided. My bad. You can, if you wish, use my error above to change the text black on the gray background….

    #365031 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Thanks, you two – I really appreciate the feedback and help! I had previously tried adding that to the CSS for the skin and thought it broke the skin. However, retesting just now, I discovered it was a PBCAK, as I had not switched the player controller before previewing. D’oh!

    I tried using Inspect Element in IE and Firefox as well as using NVDA to see what it read to see if I could figure out what element is “breaking” tab functionality for the CC button in IE. No luck yet.

    Out of curiosity, can I add the pseudo class :focus to the buttons? I know the :hover works, so my inclination is to believe that :focus should work similarly. If I can do it in the skin, that adds a layer of accessibility to the player by creating a larger focus area for tab users.

    #365162 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I may have just found something that could help with the closed caption button bug. If you click on the CC button, then change the caption selector, you can see the focus move slightly to the left of the actual button. This “mimics” the behavior of the tab order, suggesting that this might be related to settings or configuration of the caption selector? I might have a chance to toy with it and am wondering what happens if you remove the caption selector from the player…

    #365482 Score: 0
    Profile photo of Wendy Miller
    Wendy Miller
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    junior moderator
    wise owl
    profile
    verified member
    55 pts
    @wendymiller

    Hi Jason,

    Yes, you should be able to add :focus pseudo classes to your skin if you want to, and still have it override any other CSS files linked to the document. It looks like the media player skin CSS is declared after all of the others, so it should override any of the others, including your custom ones added via HTML extension at the root of the title. (see attached pic.)

    As for the CC button getting stuck on tabbing, technically, the next thing that should get the focus would be the input elements in the CC menu (none or English). I don’t know why those are getting skipped, but they get skipped in all browsers, not just IE. (The issue has multiple factors as it is written up in the bug database.) I did try setting display to “none” for the CC button, and you are then able to tab past it in IE.

    • This reply was modified 3 years, 3 months ago by Profile photo of Wendy Miller Wendy Miller.
    #365576 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I’ll be eager to hear when the bug is resolved. I’m waffling on whether to create a separate custom skin with no CC and then just adding it over the player or sticking with my current setup. If I use the skin, I would adjust the position of the mute button and add the CC at the end. That’s primarily for a tab and reading order.

    This has all been a tremendous help and once again cannot emphasize how helpful everyone is on the forum. I’ve grown as a developer so much in the past year and am now getting “consult” calls from a less experienced Lectora user that originally farmed out their courses 🙂

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.