Multiple Language Captions

broeme
broeme Community Member Posts: 94 ♪ Opening Act ♪
Greetings everyone...hope you're staying safe, healthy, and productive!

I'm building a course with videos and adding English captions is pretty easy with the VTT files provided by my client.  They also have Spanish and French caption files for each video and would like to make all 3 available on the CC player button.  Seems like something we should be able to do, but the solution escapes me.

Is there a way to add multiple languages to the captions list of a video?  Perhaps via multiple VTT files or a single "combined" VTT file?

Thanks in advance!

Comments

  • cainam
    cainam Community Member Posts: 290 ☆ Superstar ☆
    I'm not familiar with using the CC or multiple languages - so wait around fro someone who has experience there...but as a backup, could you just have 3 different versions of the video - show the version with their language when selected?
    - Adam Cain
  • broeme
    broeme Community Member Posts: 94 ♪ Opening Act ♪
    Hey Adam.  Thanks for the response.  Yes, that's my Plan B if the multiple language caption option isn't possible.
  • klaatu
    klaatu Community Member Posts: 988
    Brian, I am not sure about doing it in the built-in version of mediaElement.js but you can do it if you add your own instance of the player. Adding your own in a web window gives you easy access to the entire API without having to hack and fight the program.
  • broeme
    broeme Community Member Posts: 94 ♪ Opening Act ♪
    Hey Darrel...that's an interesting idea.  With my own instance of the player, can I still assign events to the video timeline and trigger ondoneplaying actions?
  • klaatu
    klaatu Community Member Posts: 988
    Absolutely. You'll be able to access and utilize the entire mediaElements.js API without limitations (or having to wrestle Inspire). In addition to the full API, you can also use plugins such as "jump forward", "loop", "Markers", "Preview", "Quality","Skip Back", "Speed", "Snapshot" and many more.
  • klaatu
    klaatu Community Member Posts: 988
    Brian, just to make sure I didn't mis-communicate. Lectora uses a built-in version of the actual mediaElement.js player. I believe the built-in version only has a limited amount of the capabilities of the full  mediaELement.js library (I have never delved too deep into the built-in versions API because it's split into multiple minimized libraries and what I have customized was more of a fight than just adding my own) but for most simple applications it works perfectly.

    Because Lectora uses the mediaelement.js, anything that Lectora can do a stand-alone version can do, and more. The difference is how you access those features. When you use your own version of the player it is not as straight forward as selecting an action from the built-in actions as those are for the Lectora version of the player only. To access all the different things you can do with your own added player you use JavaScript through the run JavaScript actions. It requires a little JavaScript knowledge, understanding how to use an API and communication between an iFrame and parent window. I apologize if I made it sound as easy as pointing to a video file and using the built-in actions.

    If this is something that interests you and you want to pursue it further feel free to reach out. I will try to help as best I can, time permitting.

    Stay well.
  • broeme
    broeme Community Member Posts: 94 ♪ Opening Act ♪
    Darrel - I really appreciate the additional information and detail.  We've got a total of 170 courses in the catalog they want to customize.  Under the circumstances, I think moving away from the standard player would be cost/time prohibitive.  BUT, for the next design iteration, I'll definitely looking into that option.  I'd appreciate having more options and features under my control!
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Basically with the use of Javascript you can change most sources of page-elements in Lectora. I did it with images, videos, audio and webwindows sources. So i do think you can change the source of a VTT file too where and when needed.

    If you can send along a sample of how and what you need ( in a package preferably cause i work mostly in Lectora Online now ) i gladly get that working for you.

    Kind regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Quickly jumped on it and it should be possible to use multilanguage VTT files in the default player. In the Lectora code i found several pieces of code that point to that.

    if (lang == 'none') {
    t.selectedTrack = null;
    t.captionsButton.removeClass('mejs-captions-enabled');
    } else {
    for (i=0; i<t.tracks.length; i++) {
    if (t.tracks[i].srclang == lang) {
    if (t.selectedTrack === null)
    t.captionsButton.addClass('mejs-captions-enabled');
    t.selectedTrack = t.tracks[i];
    t.captions.attr('lang', t.selectedTrack.srclang);
    t.displayCaptions();
    break;
    }
    }
    }

     

    Above a piece of code from the Trivantis scripts that show a if/else about a variable 'lang'.
    That suggest that if you somehow can set that variable to EN or ES or whatever language you want,
    and do have multiple VTT or SRT files in your project...it will make it multilanguage.

     

    Further more i found a AJAX call for a source file for the VTT...

    $.ajax({
    url: track.src

    That one you can use to to change the source of the VTT and/or movie file.

    As said, if you deliver me a sample of one of your courses ( or just the part with the video ) i get it working.

    Kind regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    As you can see in the console of my test, the locale language is empty and thus mediajs jumps to use the default English VTT.

    I tried setting the locale language to something else, to see if it works...but failed for now ;-)

    document.navigator.language.set("es");

    In Lectora there is also a Trivantis variable called TriCCState
    Tried setting that too, VarTriCCState.set("es");
    but it gets overridden to default [en] by Lectora self at publishing...

    Experimenting further....
  • carlfink
    carlfink Community Member Posts: 842 ☆ Superstar ☆
    Math, when running in a browser, shouldn't the media player be getting the country setting from that browser (and maybe the underlying OS)? Isn't that the point?
  • broeme
    broeme Community Member Posts: 94 ♪ Opening Act ♪
    Thanks to you both for giving this additional thought.  If English is the default value each time the course first launches, that's no problem at all.  However, if the learner chooses French CC on the first video, and then that var value dictates all other videos will display French CC, that would be slick.

    Functional question.  With Math's solution, when a learner chooses English, French, or Spanish from the CC popup list, will the closed caption text instantly change to the selected language?  Or, will the video start over?

    My Plan B (3 different videos, each with a single VTT) should work fine, but the video will start over each time they select a new language.  That may not actually be a problem since they logically won't be changing their selection often.
  • klaatu
    klaatu Community Member Posts: 988
    I've got it working perfectly in Visual Studio Code (attached files.) It doesn't get any easier. Unfortunately, when it is added to Inspire in a web window it breaks; a quick look seems to indicate conflicts with the built-in player. Odd, it shouldn't. I think I'm missing something very simple.

    Math, if you use VSC, open this folder and run it in live server. You'll see the CC button has multiple languages and can switch freely between them even while the video is running. The only thing left to do is get it working in an Inspire web window.

    This is by far the simplest solution. All a non-programmer would have to do is alter the included index.html file to point to your video and subtitle files. The attached sample has the sample vtt in English and French. To add additional languages you would just have to duplicate the line <track src="/en.vtt" kind="subtitles" srclang="en" label="English">
    <div>altering the new one for the additional language.</div>
    <div></div>
    <div>I will try to work on this over the weekend, time permitting.</div>
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @Carl, yes browser and OS should define locale, but you should be able to change that dynamically.

    @Darrel. I tried changing parts of Trivantis mediaelements.js When publishing a message occurs 'you are overwriting a build in Trivantis script' ok, thats fine. I want that..but it doesnot do it. The original file stays there and not my changed one. In Lectora Online that is. I do know older versions of Lectora desktop did replace files.

    Im gonna see and try to get your code working in a webwindow Darrel 👌😁
  • broeme
    broeme Community Member Posts: 94 ♪ Opening Act ♪
    @mnotermans5114 @Klaatu @CarlFink @cainam

    First off, I want to thank you guys for the support you show the community and direct advice you've provided me on multiple threads.

    While I'm waiting/hoping for Lectora to fix their non-seamless player (full screen problem on iOS), I guess I need to pursue an alternate solution.  The "full" version of MediaElements seems like a logical choice, but I have a couple questions.  First, if positioned in a web window, can the media player pass 508 accessibility tests?  Second, do any of you guys have working examples that I might recycle to fit my needs?  I've got access to a good programmer, but he's not familiar with how to interface with Lectora for the variables, actions, and conditions as it relates to the player.

     
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!