Multiple Language Captions

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.

Hey Adam. Thanks for the response. Yes, that's my Plan B if the multiple language caption option isn't possible.

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?

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?

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.

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.

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!

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

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.

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

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; iundefined

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

@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 👌😁

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 undefined

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?

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

undefined