July 17, 2017 at 6:05 PM #364448
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.
Attachments:July 18, 2017 at 8:10 AM #364504
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 Jason Dalrymple. Reason: added information about accessibility issue
Attachments:July 18, 2017 at 4:32 PM #364591
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.
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.
Attachments:July 19, 2017 at 10:52 AM #364797
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.
Attachments:July 19, 2017 at 3:49 PM #364951
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.
}July 19, 2017 at 4:59 PM #364956
Darrel SomozaMember209 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.
Add the above to your first added CSS sheet. No bloat 😉July 19, 2017 at 5:07 PM #364959
Darrel SomozaMember209 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….July 20, 2017 at 8:03 AM #365031
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.July 20, 2017 at 1:57 PM #365162
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…July 24, 2017 at 1:57 PM #365482
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 Wendy Miller.
Attachments:July 25, 2017 at 8:16 AM #365576
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 🙂
You must be logged in to reply to this topic.