Clickable media element?

Whoops, in my haste I forgot the attachment.

Put this in an external CSS and add it via HTML Extension - cascading style sheet.

.mejs-container .mejs-controls div {

pointer-events: none;

}

undefined

#Interesting

When you say "it is still clickable" are you referring to the buttons, or the video itself?

I could be mistaken, but I believe that even with the controllers turned off (set to None in Lectora) you can still toggle the play of the video by clicking it. Perhaps the pause/play buttons are hidden, but the toggle play is firing off of the video itself.?

Another possibility is that you're selecting the wrong element with your CSS. Lectora tends to bury elements into many layers of nested HTML tags. For example, to use CSS to style an individual text field (perhaps the student made an entry error and you want to turn it lightpink) you can't select it by the field's HTML Name as assigned by Lectora. On publish, the HTML Name refers to the undefined or tag above it is still displayed, so it's still clickable.

I was thinking about it more and wondering something similar, ie. missing the class in the player.css that would completely wipe out the play button. I'm only targeting the button, but there may be another class in the CSS that would get rid of it. The interesting piece is that if you click where the CC button would be, there's nothing there. I thought I had removed it completely at one point so there wasn't even the space there...

I've attached my sandbox course where I'm toying around with a bunch of different things - the page to look at is the Current Audio Player page.

There it is! I'll add it to my audio skin mod CSS - At some point, I'm going to teach myself to build my own custom skin. Thanks again!

Here's an article that might help when you're ready :) https://www.trivantis.com/blog/skinning-lectoras-new-html5-based-media-player/

Yes, order is very important in cascading style sheets.

@Klaatu - It's very close. The only issue with this is that it disables all of the buttons on the player, including the volume button and time rail. I did try putting the pointer-events on the buttons themselves with no luck. Out of curiosity, does order matter in style sheets? My hunch is no, so I hadn't tried adding it above the display: none for each button.

I still find it interesting that the same attribute for the Closed captions button completely removes it from visibility, clickability and the tab order.

@jvalley4735 - Thanks for the article! I'll have to test it out and see what I come up with. Part of what I think I was missing was creating the sprite sheet with my custom icons. Having the CSS file there will definitely help out! One thing I noticed is that you can sort of use a custom skin even with Web Accessibility turned on - If you turn it off and choose one of the other skins, it retains the skin you choose with web accessibility turned off.

@klatuu - I wouldn't have necessarily thought that. In any case, I tinkered with the positioning in my existing CSS to no avail and removing the display: none and adding the pointer-events only didn't do the trick on the individual pieces (ie. .mejs-play button, etc).

@jvalley4735 - I've been working through that link and the information in the Help, but am missing something significant somewhere. The closest I've gotten is to get the buttons I want to show up. However, it still shows the default skin behind it without my background. I'm a bit stumped, so need to do more reading and research down the line.

@jvalley4735 - I think in tinkering with my other custom CSS, I think I may have figured a starting point. My custom file adjusts the length of the .mejs-container .mejs-controls, but change the "mejs-container" to ".bluetea" so it expands the background from the skin (using bluetea for experimentation. The bluetea background in the sprite is only 30px height, and I'm trying to get 47px. When I change the value in that class, it only changes the height of the "default" player, not the height of the background...

Added note: My custom CSS hides the play and CC button, hence the gaps there.

Hmmm....I wonder if the background image is too large? You can always submit a Support ticket to have them review your files and advise on what's missing as well.

I just realized that I already shared the Photoshop file along with the skin files in that post here: http://community.trivantis.com/shared-content/custom-html5-media-player-skins/ The link to it is beneath the preview image.

If you use Adobe Photoshop and Illustrator, the skin layers are already saved as vector Smart Objects. But if you don't use either of those programs, I can still make a larger version for you if that's what's needed here. I still want to see your AWT and CSS skin changes to be sure.

undefined

Hi Jason,

I'd like to have a look at your AWT if possible. If it's a large title and you can't share it all, could you at least share an AWT with the one page containing the player you're trying to modify? (File undefined Zip will get the AWT plus all resources.) I'm the person who built the bluetea skin, so I might be able to help.

My guess about the height issue is that you're changing the height of the background div, but since the images are provided via a sprite sheet, that's not going to change the height of the actual images. I still have the vector version of the bluetea sprite sheet. So, if necessary, I can make a larger version of the sprite sheet for you where everything has a height of 47px instead of 30px or just share the editable vector file with you if you want to make any other modifications yourself. It's an Adobe Illustrator file, but I could save it as an .eps as well.

@wendymiller - I've actually managed to make a ton of progress and discovery along the way thanks to the inspiration about the background size.

I've been using CSS Sprite Generator linked from the instructional and have gotten to the point where all my buttons are the correct ones and in the location where I want them (with 2 exceptions).

I'm attaching my current progress and would welcome suggestions! I need to get the mute button to the left more, as it's bleeding off the controller (even if I increase the width of the controls). I also noticed that I couldn't get changes to the mejs-time, time-rail or subsequent spans to take if I used the custom class for the player.

I'm also hoping to add a replay or restart button that goes next to the play button - but for now, getting this up and running is huge.

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.

undefined

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: http://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.

undefined

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!

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....

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 ;-)

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.

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;

}

undefined

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.

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...

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.

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 :)