Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #444725 Score: 0
    Profile photo of Brian Roemer
    Brian Roemer
    Member
    beginner
    intermediate
    friend finder
    curious george
    contributor
    wise owl
    product reviewer
    picture perfect
    9 pts
    @broeme

    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!

    #444745 Score: 0
    Profile photo of Adam Cain
    Adam Cain
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    curious george
    contributor
    35 pts
    @cainam

    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?

    #444748 Score: 1
    Profile photo of Brian Roemer
    Brian Roemer
    Member
    beginner
    intermediate
    friend finder
    curious george
    contributor
    wise owl
    product reviewer
    picture perfect
    9 pts
    @broeme

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

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

    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.

    #444793 Score: 0
    Profile photo of Brian Roemer
    Brian Roemer
    Member
    beginner
    intermediate
    friend finder
    curious george
    contributor
    wise owl
    product reviewer
    picture perfect
    9 pts
    @broeme

    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?

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

    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.

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

    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.

    #444846 Score: 0
    Profile photo of Brian Roemer
    Brian Roemer
    Member
    beginner
    intermediate
    friend finder
    curious george
    contributor
    wise owl
    product reviewer
    picture perfect
    9 pts
    @broeme

    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!

    #445029 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    131 pts
    @mnotermans5114

    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

    #445031 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    131 pts
    @mnotermans5114

    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

    #445033 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    131 pts
    @mnotermans5114

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

    Attachments:
    #445062 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    friend finder
    47 pts
    @CarlFink

    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?

    #445077 Score: 0
    Profile photo of Brian Roemer
    Brian Roemer
    Member
    beginner
    intermediate
    friend finder
    curious george
    contributor
    wise owl
    product reviewer
    picture perfect
    9 pts
    @broeme

    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.

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

    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>

    Attachments:
    1. embed.zip
    #445091 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    131 pts
    @mnotermans5114

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

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

You must be logged in to reply to this topic.