Custom player breaks video
December 5, 2017 12:00 AM
I've created a custom audio player that I'm using throughout my course. There are a couple of pages that have a video and a setting from the CSS for the player is affecting the default video player, even if I have the controller set to none.
I tracked down the issue to a piece of the custom audio CSS:
div[id^"mep"] {width: 512px !important;
}
Is there a way to target that so that it ONLY applies to the audio player? Or, a way that I can attach an attribute to the video force it to the right width? (I'll be doing some trial and error tomorrow, but thought I'd post asking as well).
Discussion (8)
Edit: I retested and changing 0 to 1 in the above code does work. From an ROI perspective, it may just be easier to do that in the few places where I have multiple media files, which, thankfully, is pretty rare.
If there are other ideas, I totally welcome them!
Sure. That's a "begins with" selector (^). If you know the actual HTML ID, replace everything within the brackets[] with #xyz (whatever the html name is). The hash, or if you're old like me a number sign, denotes what follows is an ID. So it would be like div#mep_01
D
Are you trying to use your custom button to trigger the mejs button? Can you provide the file for me/us to tinker with?
You should be able to look up the Dom tree and find something with audio in it the you can add to what you have. You might need an Nth child selector. I sense a bit of interest, check out jQuery Selectors. In another thread you asked about jQuery vs. Vanilla JS when used in Lectora (I added the last bit), well, this is one of the main reasons why. Look at all those awesome selectors that you can use to pin down your target. Doing those with vanilla JS is possible, some require a lot of code but.. why reinvent the wheel?
I had often wondered, but never took the time to research, what the purpose of the (^) was. This could be exceedingly helpful going forward as I think about things.
Instead of the HTML name, I replaced "mep" with "audio" so only applies to div's that begin with "audio". This worked AND didn't affect other pages with different players. Yay!
For the next trick, though, when I have my custom captions button (I disabled the player version, since it breaks tab use), if the audio is below the video, it breaks. This is because the div is based on the order (video = mep_0, audio = mep_1).
My question is - Can I dynamically target the "mep" just for audio? Here's the JS I'm using (from a previous thread):
if(document.getElementById("mep_0_captions_none").checked){document.getElementById(".mep_0_captions_none").click();
} else {
document.getElementById("mep_0_captions_none").click();
};
I tried changing "0" to "1" and it didn't seem to work. Is it possible to use the selector in the JS?
Here's a quick sample that reflects what I'm doing on this one - The CC is a custom button to work around the bug in the default player that breaks tab functioning at the CC button discussed in the thread Clickable media element
In the end, changing the mep ending value may be the best option, since I rarely have more than one media file. I thought it might be a value to others I've seen that have multiple media elements on pages, especially as we're thinking more and more about accessibility and the need for captions on audio.
Tim - are you referring to the thread re: populating a droplist from an array or the one where we used a variable to determine the text of the "nth" option of the list?
Is there a way to do "contains" as the div ID? If that's the case, I can use the name of the player, which is the most common denominator in the div (div id = mep_X" class "mejs-container dhsplayer-small-no-cc"
... and remember what we did to the dropdown menus in the other thread. First get all the audio divs, then find the inputs inside them.
Hint: While "^=" is a "begins with" selector, "$=" means "ends with", which may be useful.
The audio doesn't have any events synced, but does play or start captions based on some user choices at the beginning of the course (auto play audio, captions only or captions and audio). The video DOES have events synced and in my course, is controlled by buttons that use JavaScript to go to a specific point in the video, where there is a pause event.
I actually have a template that I'm looking at to see how I might be able to use the original mediaelement.js so down the road, I can alleviate the need for the separate captions button.
Thanks for posting the sample, Jason. I probably wont be able to look at it until this weekend (I hope) as things are getting crazy busy this time of year, as you might imagine. Question. Do you do anything with the audio and video other than play? If you don't need to use sync events you should consider adding in your own mediaElement.js player to avoid lectora code. You'd be really surprised how simple the actual mediaElement is to both implement and customize.
Discussions have been disabled for this post