Explore the community Forums Lectora Lectora Questions & Answers More audio player captions questions

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #349475 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    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.

    #349543 Score: 0
    Profile photo of D Noctor
    D Noctor
    Member
    beginner
    intermediate
    wise owl
    advanced
    contributor
    @dnoctor8117

    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?

    #349592 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    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.

    #349613 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    106 pts
    @jvalley4735

    Sharing this conversation with the product team 🙂

    #349724 Score: 0
    Profile photo of D Noctor
    D Noctor
    Member
    beginner
    intermediate
    wise owl
    advanced
    contributor
    @dnoctor8117

    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;

    }

    #349943 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    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.

    #350039 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

    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.

    #350115 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

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

    #355676 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    31 pts
    @JasonADal

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

    #357424 Score: 0
    Profile photo of Christine O'Malley
    Christine O’Malley
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    advanced
    contributor
    product reviewer
    LUC17 Attendee
    4 pts
    @comalley5856

    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.

     

     

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.