More audio player captions questions
March 13, 2017 12:00 AM
With the plethora of posts on working with the audio/video player, I thought I'd post my latest iteration that is the sum of digging in the player CSS, some experimentation and some help from other forums. The CSS in the file is commented with what each section does to the player, including appearance and caption settings. I also included the sections for the play/pause/stop/CC button and CC menu that I found (and did some testing on).
I still have a couple more questions:
Is it possible to use the JS on my custom CC button on a conditional basis on page load? I'd like the captions to default to on IF the learner chooses the captions option.
Is it reasonable to even offer the choice of audio and captions? The only way to get the captions to play is to play the audio from what I've been able to find.
Is it possible to set the audio to mute IF the only option selected is closed captioning? In that case, I could also add a button for mute/unmute that follows the same process as my custom play/pause.
Hope this helps some of you that I have seen with questions on the player. Once I have a "final" version, I may post it as a "permanent" resource.
Discussion (9)
I'll take a closer look at it over the weekend...
By the way, I have added the following code to your CSS file so that it works well with both audio and video.
/* Sets vertical position of captions VIDEO */
div[id^="video"] .mejs-captions-position-hover {
bottom: 28px;
}
Jason - I love the HTML extension you attached regarding the appearance and caption settings. Very, very practical indeed. Well done.
Regarding setting the audio to mute... but showing closed captions... could you not simply add an additional "Mute Media" action after your "toggle caption setting" that is associated with your "CC" button?
Sharing this conversation with the product team :)
Thanks! I owe a lot to Darren, Tim and Sergey for the help and inspiration when it comes to anything CSS or JavaScript related.
That would work if I can track down the action in the JS similar to the click function for the captions.
What I'm really shooting for is to have the captions auto play and audio muted on every page if the learner chooses the option from the Accessibility statement page. This would mean that the click function in the JavaScript would need to run when the player loads based on what the learner selects.
Unfortunately, I've not been able to accomplish that by having the JavaScript run on the show of the page, the audio player or the CC button (based on the thought that it might have to do with the order the objects load). At one point, I thought I had the value that set the visibility of the captions to default to "visible", but it wasn't conditional - it was all or nothing and not conditional.
If I can nail down how to get the captions to default to "en" conditionally, I may just reduce the options to "Auto play audio" and "Auto play captions" with a note that the audio will play when captions are selected. I thought I'd go the extra mile for learners and give them more options than may be feasible.
I think I have it - I'm putting some final touches on the module that outlines the steps and process I've used and will be posting the sample tomorrow. It turned out to work with a combination of events and action groups that control the mute and caption display.
In a flash of inspiration this morning, I found a method for muting the audio and displaying closed captions at the start of the audio. One event on the audio that runs an action group. In the action group, the action is to mute audio IF the learner has selected show captions. The other event runs the JavaScript from Darren that toggles the CC state.
There are two caveats to this: If the media is set to mute conditionally, the first half second of the audio plays before it mutes. In the case of the captions, the RunJS sets the captions to always display. I don't see a way to trigger the event conditionally and adding it to an action group, onPageShow or onShow for the audio player. If there is a way to grab the variable from the checkbox (on or null) as a condition in the JS, then I'm confident it would work.
So, a step closer to making all the options available!
I feel like this is a bit of a facepalm moment.
Here is the latest version of the course that allows users to set audio options at the beginning of a course. The options are to play audio only, captions only (no audio) or audio and captions on every page. I've added a general outline of my process for development and tried to give actions descriptive names to make it easier to see what's happening.
The restart button does not quite work yet, so ideas there would further enhance this template.
On a side note, the audio was created using a Text to Speech program called TextAloud. Captions were created with Camtasia's speech to text feature then exported as an SRT file. There are quirks with the text to speech, but for the most part, it does an really good job with some minor tweaks in the text to accommodate things like acronyms.
Working in government has really brought accessibility requirements to the forefront of my design, since I'm bound by law to make every possible effort to include accessibility. In general, though, I think "designing for accessibility" should always be considered. All users benefit from features like this, much like we all benefit from other "accessibility accommodations" in our day to day lives. (steps off pedestal). :)
@dnoctor8117 - I just realized I never responded to your comment about adding a mute action to the CC button itself. I was initially struggling with the order of actions, as it wasn't quite working right. Then I realized that the audio would mute every time they click on the CC button, which is not necessarily the behavior I want. Learners may want audio and CC at the same time on demand. That's partly why I left the volume control on the player. Down the road, there may also be a separate volume control button in my nav bar, but that may be a LONG time, given the time constraints on my current project.
Thank you Jason,
"Timing is everything", so they say! You and I are in the same boat with Accessibility requirements... perhaps this is something we could add to our topics for the new Lectora Accessibility User Group? I'll be scheduling our first meet-up for early June, 2017.
undefined
Discussions have been disabled for this post