Explore the community Forums Lectora Lectora Questions & Answers Closed Captions without the player

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #344724 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    Is there a way to allow a learner to toggle closed captions without exposing the entire video player? Our challenge is that we have some compliance training in which we can’t allow learners to fast-forward the video, but we still need to make it accessible for learners with hearing challenges and for some who will not have headsets or speakers.

    According to a post I found on this forum from six months ago, this javascript should work:

    $(“video28364”).objMedia({
    startLanguage: ‘en’
    });

    But that actually does nothing for me.

    The video is an mp4, in case that matters.

    Any help?

    #344928 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    120 pts
    @Klaatu

    Hmm, you didn’t post a link to the thread you’re talking about so I’m assuming it is for something different (and requires jQuery be loaded).

    Here is the plain javascript you can put on a button. This will toggle between English captions and no captions. You will have to make sure that your projects closed caption radio buttons have the same HTML names.

    if(document.getElementById(“mep_0_captions_none”).checked){
    document.getElementById(“mep_0_captions_en”).click();
    } else {
    document.getElementById(“mep_0_captions_none”).click();
    };

    Keep in mind that if you copy and paste you will have to replace all the quotes as they do not copy over correctly from the forum.

    Hope this helps.

    Darrel

    This post has received 1 vote up.
    #344930 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    120 pts
    @Klaatu

    Oh, I forgot to mention with the above that the initial state of the closed captions should be none, which is the default.

    #345023 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    Darrel, thank you!! It works perfectly, no muss, no fuss, and has instantly earned a place in our code library.

     

    #345092 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    How interesting that I was working on this myself today and about to ask the same question, though my situation may be slightly different. In my case, I added the video, then captions using an SRT file, both generated through Camtasia. The video is strictly for audio purposes (because you can’t change the size of the audio controllers – grr!) and the closed captioning for the audio is pretty real-estate heavy. I did try adding the JS to the button that shows the video, but was unsuccessful. I can post a sample (less cluttered than my usual) if it would help.

    #345095 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    Just guessing, Jason, but I suspect that having the javascript on the button that launches the video won’t work because the objects the script calls (the radio buttons) don’t exist until the video is launched. I added a separate CC button (similar to the one found in most player skins); launch the video, then click the button, and it works great.

     

    #345097 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    Thanks, Stan – that inspired me to try changing the layering to move the video so that it loaded first, then the buttons and that worked! I have separate buttons on the title that control the audio/video so that the learner has the choice without seeing the controller.

    Now for the next trick, hiding that giant play button that overlays the video when it opens or ends…I did this once with a different video that had no controller using meta tags (thanks to Tim and Darrel), but no captions. I’m going to have to go back to that thread and see if I can figure it out again, but when I add the meta tag to the page, I lose the captions 🙁

    #345101 Score: 0
    Profile photo of dunnjo98
    dunnjo98
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    @dunnjo98

    This was great, we were looking to do this too and I was ready to roll up my sleeves, but this saved me so much time. Thanks Darrel.

    #345139 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    120 pts
    @Klaatu

    You’re welcome guys. I’m glad I was able to help.

    Jason, I advise against using meta tags for anything other than meta data. Its bad practice and will eventually cause you grief. Order matters. Instead place your CSS in an external file and use HTML Extension cascading style sheet. If you haven’t figured out the lost captions issue, post a sample and I’ll take a look see.

    #345233 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    Darrel – This was from a previous thread that there was much back and forth on 🙂 Button to go to video event – The eventual solution to the question about hiding the default giant play button was to use add a meta tag which hid the play button then a transparent video to “disable” click to play. When I take that same HTML extension and add it to the page with the video that’s sets CC on by default, the CC doesn’t display.

    I did poke around a bit in the trivantis-player.css to see if I could pick something out that might make the difference and think I might be close. I found the .mejs-overlay-button and if I change the value to display:none while I’m inspecting the element in Firefox, the button is gone and the captions act as expected. However, if I add that as an HTML element, it doesn’t work.

    Here’s my attached sample (with just the mejs-layer set to display none, but not the overlay-button value changed). I’m so close, I think, I can almost taste it…

    #346836 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    I thought I’d “bump” this thread back to the top as I put together a solution that solves this and other possible questions around the overlay button on video files. Based on Darren’s comments, I created a CSS file that changes the width and height of the .mejs-overlay-button properties (attached). When adding it at the title or page level, this effectively “hides” the play button with or without a controller.

    I’ve also attached a sample that includes Darren’s code for setting the closed captioning on by default – One kicker for me is that it doesn’t appear to work when the controller is there.

    The caveat with all of this, however, is that I’m having trouble getting the video to even play when testing in Firefox (both from within Lectora or after publishing to HTML). It works just fine in Chrome and Internet Explorer. I’m not sure why that would be, so I’d love for someone to take a look and see why that might be. I’m using Lectora 16 and Firefox version 51.0.1

     

    • This reply was modified 1 month ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: re-upload of file
    #346945 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    Ok, so I’m not sure why it’s not letting me upload the zip files – I’ll try again tomorrow (I’m also not able to edit the original post again for some reason…)

    #346976 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    120 pts
    @Klaatu

    First, please do not add CSS using meta tags. Open a text editor, like notepad add the rule below. Change the file type to “all files” and save as jason.css (or whatever name you prefer with the .css extension). Use the Cascading Style Sheet extension to add your styles.

    .mejs-overlay-button{
    display:none;
    }

    Post your sample and I will take at why you are having trouble with Firefox.

    • This reply was modified 1 month ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: better wording
    #347061 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    1 pt
    @JasonADal

    I did create a CSS file and added it as an extension at the title level rather than the meta tag as you suggested. The Firefox is a stumper, as I tested it again using preview from Lectora, publish and test from the local version and uploaded to a web service and in all cases, it had the same result – the video displays, but just spins on when hitting play.

    The console shows “media resource <filename> could not be decoded” for the video file and “error creating media element player” based on the trivantis-media.js. FWIW I created the video in Camtasia and did only lowered the overall quality to try and minimize file size.

    Edit: I’m still not able to upload my sample on the forum for some reason, so I added it for download here.

    • This reply was modified 1 month ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: retry upload
    #347079 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    120 pts
    @Klaatu

     

    While it doesn’t seem to break anything, you should remove the extra semicolon from the rule.

    .mejs-overlay-button{
    display:none;
    }; <—- Remove this semicolon.

    I published your lesson using v16 (to web, not SCORM or Offline) and the videos ran fine in Firefox.

    I also published it in V17 (again, to web without seemless play) and it too ran in Firefox. I’ll attach the V17 output. see if that makes a difference for you.

     

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.