Closed Captions without the player

smiller7502
smiller7502 Community Member Posts: 181
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?

Comments

  • klaatu
    klaatu Community Member Posts: 988
    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
  • klaatu
    klaatu Community Member Posts: 988
    Oh, I forgot to mention with the above that the initial state of the closed captions should be none, which is the default.
  • smiller7502
    smiller7502 Community Member Posts: 181
    Darrel, thank you!! It works perfectly, no muss, no fuss, and has instantly earned a place in our code library.

     
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • smiller7502
    smiller7502 Community Member Posts: 181
    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.

     
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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 :(
  • dunnjo98
    dunnjo98 Community Member Posts: 25
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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...
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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

     
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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...)
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • klaatu
    klaatu Community Member Posts: 988
     

    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.

     
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    Still no luck with both my desktop and laptop here at work - it's either a network issue or a browser config issue. I'll try at home tonight and see what's going on. For what it's worth, I had that extra semi-colon in as a just in case that was the issue. I'll yank it out of there on the buttons. Thanks again!
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    Still no luck. I've tried both laptop and desktop at work and laptop at home. Updated Flash on the home computer and still get the spin. I uploaded the course to a web hosting site and still it fails. This is the template I'm using for the courses I'm working on (the autostart selections aren't configured yet).

    I'm totally stumped and wondering if it's time for a support ticket.
  • klaatu
    klaatu Community Member Posts: 988
    What v16 are you using? Do you have all the updates? Did you try to put the video's in a separate lesson without anything but the player? Also, I recommend Freemake Video Converter. It is a free tool that has never failed me. If you decide to give it a spin just go slow installing it and read everything carefully because its free it wants to install other apps. You can select not to install them all.
  • klaatu
    klaatu Community Member Posts: 988
    Okay, its the way they are encoded. The lesson ran in every browser but Firefox. I downloaded the file and tried to open it directly with FF, no joy. I re-encoded using the app I suggested above (selected mp4 even though its already an mp4) and the re-encoded file plays perfectly in FF. I'll attach it here. Please load it onto the server in place of the one that's there now (rename it as I changed the name) and see if it works.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    Testing it solo was my plan for this morning, as I was leaning in the direction of it being an issue with the video. It's unfortunate that I don't have more direct control over the audio player settings - the file sizes would be much smaller than the method I'm using now.

    Unfortunately, "free versions" and "government" don't go well together. I tried to convince them to let me use Balabolka for our text to speech and got pushback because it was free. I'm going to try going with the standard production settings in Camtasia and see if that makes a difference. I had reduced a number of the quality settings to try and reduce the file size, so let me see if that makes a difference. Otherwise, I have Premier as well and go that route if necessary.

    Thanks again for all the help, Darren and all!
  • rwvaughn
    rwvaughn Community Member Posts: 2 ♪ Opening Act ♪
    Darrel, javascriptt code works in Run and Preview mode in 17, but throws error "Unable to get property 'click' of undefined or null reference" when published out and run in IE.

    Any idea? (Let me know if you need more detail)

    Also, where might one find the radio button names used in the default controller.

    Thanks!
  • klaatu
    klaatu Community Member Posts: 988
    rwvaughn, can you please elaborate? I'm not sure what you are trying to accomplish. This thread regarded a video not playing in Firefox. You seem to be referencing radio buttons?
  • klaatu
    klaatu Community Member Posts: 988
    rwvaughn, try turning off "seamless play" and republish. Seamless play runs your project in an iframe and thus scripts trying to have an effect need to reference the parent window or they will be undefined. So if you have something like document.getElementById("xxxxxx"), change it to parent.document.getElementById("xxxxxx") if you want to leave seamless play on.
  • schapman1885
    schapman1885 Community Member Posts: 53
    I'm having trouble getting this to work. I don't have a radio button, just a normal button. Any guidance would be much appreciated!
  • schapman1885
    schapman1885 Community Member Posts: 53
    To be exact, my video does n't use a controller, we have separate pause/play buttons. We'd like to add a CC button to allow the learner to toggle closed captions, on and off.  And I'm totally missing the boat on this one... what do I name as mep_0_captions_none and mep_0_captions_en? Where do I look?

     
  • schapman1885
    schapman1885 Community Member Posts: 53
    I had a typo! I got it working!! Thanks!
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!