Closed Captions without the player

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.

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.

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

undefined

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.

undefined

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

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.

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 :(

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

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

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

undefined

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.

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

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

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

undefined

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!

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.

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!

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.

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.

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.

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!

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?

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?

undefined

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!

I had a typo! I got it working!! Thanks!