Closed Captioning with WebVTT

With the release of Lectora 16.2 and Lectora Online 3.2, two new file formats for closed captions are available, SRT (SubRip Subtitle), and WebVTT (Web Video Text Tracks). Both formats are much simpler to write than the XML format we’ve always supported. However, the WebVTT format is preferred because it is the only format that currently works on iPhones. To learn more about the WebVTT format, click the Preview button and watch the video presentation with WebVTT closed captions in action!

To download the Lectora 16.2 AWT file, click the Download Lectora File button. To download the Lectora PKG file click the Closed Captioning with WebVTT button beneath the preview image.

qrcode

Preview image
Additional files: Closed Captioning with WebVTT

Tags: , , , , , , , , , , ,

Comments

  1. Profile photo of Deirdre McGlynn
    Deirdre McGlynn

    Is there any way to customize how the WebVTT captions are displayed? If there is a way to adjust the styles, would that be specified in the timed caption file itself? in an html extension (type set to CSS)? other?

    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Hi Deirdre,
      The way to style captions in a WebVTT file is to wrap the text you want to style within a tag and add style properties to the tag. There are a few instances of this in the WebVTT file attached to the video in this example. The text field on the right in the preview also shows the full text of the WebVTT file used by the video.

      I will try to paste in an example here, but I don’t know if the span tag syntax will be preserved one I post this comment.
      This is my styled text.

      For a better explanation and more options, see the “Working with closed-captioning” help topic in the Lectora Information Center here:
      http://trivantis.com/help/Lectora/16.2/ENG/Lectora_Help/index.html#5610.html?Highlight=closed captions

      I hope this helps!

      1. Profile photo of Wendy Miller
        Wendy Miller Post author

        Yep, it wiped out all of the span tag syntax. Have a look at the example instead! Sorry!

  2. Profile photo of dsaunders
    dsaunders

    Thanks for the sharing the example – Is anyone else experiencing issues with the Closed Caption button menu? It appears to be operating like a “keyboard trap” when trying to operate the control without a mouse. Not seeing any to work around this issue at the moment and I think others must have noticed this by now.

    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Hi dsaunders,

      The developers are aware that this is an issue for certain browsers and will hopefully have a fix in place for it very soon.

      1. Andrea Vaccaro

        To try to get around it, I have inserted the video directly on the page without using any skins. I added a play and pause button using the actions in Lectora (16.2.1) (this works – all good!). I was able to add a caption file, and the captions play all the time (okay – less good, but still progress.). What I cannot do is find any way to make a button that will toggle the captions. I tried using the javascript action, but I am just not talented enough to write javascript that will work. So, thee questions…

        1. Is there a way to use buttons and actions (rather than skins) to turn the captions off and on?
        2. Can we upload a true HTML5 player using “manage skins?” (This would contain more than just the CSS file and the Sprite file like in the examples provided by Lectora.)
        3. Will Lectora 17 have have any additional functionality in this area (Perhaps a play caption file action! maybe out of the box video skins that correct this?)?

        We have been trying to solve this for about a month. Help!

        1. Profile photo of Matthew Mallimo
          Matthew Mallimo

          Hi Andrea Vaccaro,

          1. I wrote a quick script that can be inserted into a “Run Javascript” action:

          var mediaPlayer = MEDIAID.mediaPlayer;
          var bIsCaptionOn = getDisplayDocument().getElementById(“mep_0_captions_en”).checked;

          if(bIsCaptionOn){
          mediaPlayer.setTrack(“none”);
          getDisplayDocument().getElementById(“mep_0_captions_en”).checked = false;
          getDisplayDocument().getElementById(“mep_0_captions_none”).checked = true;
          }else{
          mediaPlayer.setTrack(“en”);
          getDisplayDocument().getElementById(“mep_0_captions_en”).checked = true;
          getDisplayDocument().getElementById(“mep_0_captions_none”).checked = false;
          }

          To use this, simple replace MEDIAID on the first line to the ID of your media with captions. You can get the media ID by going to the media’s property tab, and opening the ‘Description’ window (its towards the lower right side of the panel, under the edit Pencil). For Example, the line could look like “var mediaPlayer = video40.mediaPlayer;”.

          2. Currently we do not support uploading of different HTML5 players. We only allow for inserting custom skins.

          3. Adding a “Toggle Captions Action” is currently being considered.

          1. Profile photo of Wendy Miller
            Wendy Miller Post author

            Thank you so much, for the JS solution, Matthew! Just one note to Andrea about the code. If you copy and paste Matthew’s code into Lectora, be sure to change all of the quotation marks and apostrophes to normal ones. When a post is made on the community, those get changed to the “curly” quotes and apostrophes, and they stay that way when you copy and paste into Lectora. Those characters will keep any Javascript code from running correctly. 😉

          2. Andrea Vaccaro

            Thank you for this. I tried it and it does not work just yet. I can think of a few mistakes I might have made.

            1. I used an SRT file. Do I need to use a different type of file?
            2. Is there somewhere in the code where I am supposed to point to the caption file specifically or is it really as simple as changing the MEDIAID to the video number from the description? Mine now looks like this: var mediaPlayer = video51061.mediaPlayer
            3. Do I need to review my file names for things like capital letters or spaces. I have no space, but I do have capital letters.
            4. Does it matter which browser and LMS I am on? We are still using IE 😛 and SABA LMS…

            I promise to get less stupid… 🙂 Thank you for your help so far!

            Oh – adding a toggle captions button would be awesome! It would be nice if we could add most of the functionality of a player without actually adding a player that might not be 508 compliant.

        2. Profile photo of Wendy Miller
          Wendy Miller Post author

          Andrea,

          You are correct that the JS code does not work correctly in Lectora 16. But I found a fix that might work for you. Try replacing every instance of getDisplayDocument() to just document. getDisplayDocument() will work in Lectora 17, but not 16. I tried the following code in both Lectora 16 and 17, and it worked in both.

          var mediaPlayer = video39.mediaPlayer;
          var bIsCaptionOn = document.getElementById(“mep_0_captions_en”).checked;

          if(bIsCaptionOn){
          mediaPlayer.setTrack(“none”);
          document.getElementById(“mep_0_captions_en”).checked = false;
          document.getElementById(“mep_0_captions_none”).checked = true;
          }else{
          mediaPlayer.setTrack(“en”);
          document.getElementById(“mep_0_captions_en”).checked = true;
          document.getElementById(“mep_0_captions_none”).checked = false;
          }

          And remember to change the curly quotes to normal ones and change the media ID to your own. I hope this helps!

          1. Andrea Vaccaro

            It works! This is the answer you should give people! Thank you so much!

  3. Profile photo of dsaunders
    dsaunders

    Hi Wendy – Thanks for your response. I’m glad the developers are aware. In the mean time, it looks like the Lectora video player is not currently an option for those who wish to provide a truly accessible video with captions for those who rely on keyboard control. I’m likely to look at options for custom video controllers in the mean time.

  4. Profile photo of Jurg van der Vlies
    Jurg van der Vlies

    Great upgrade to captions!

    Is there a way to change the displayed language, let say to Dutch? Also are we able to add multiple languages?
    Right now is either None or English.

    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Hi Jurg,

      There is currently no built-in way to change the language label. However, you can change it via Javascript. Add an OnShow -> Run Javascript action to the page containing the media, and add the following code.

      document.getElementById(“mep_0_captions_en”).nextSibling.innerHTML = “Dutch”;

      Then add a small delay (like 0.5 seconds) to the action to ensure that the page has time to fully render before the code runs. I tried this with the example shared here, and it worked.

      Also, the new media player does not yet support multiple languages for closed captions. But I will be sure to add both of your concerns to the developer’s list of future improvements.

      Thank you for the feedback! 🙂

      1. Profile photo of Jurg van der Vlies
        Jurg van der Vlies

        Hi Wendy, Thank you for responding. Somehow this JS addition doesn’t work. What am I missing?

        I used:
        document.getElementById(“mep_0_captions_en”).nextSibling.innerHTML = “Dutch”;

        as well as:

        function function1() {
        var m = document.getElementById(“mep_0_captions_en”).nextElementSibling;
        m.innerHTML = “Dutch”;
        }

        1. Profile photo of Wendy Miller
          Wendy Miller Post author

          Hmm, I suppose it is possible that the ID assigned to the language radio button may be different than “mep_0_captions_en”. It’s the label element that follows that radio button that you want to change, but it does not have its own ID, so I used nextSibling to get at it. Do you know how to inspect html elements with a browser? If so, you might check to see if the radio button ID needs to be changed in the code. If not, you’re welcome to send me your file and I’ll have a look and see if I can figure it out. wendy.miller@trivantis.com

          1. Profile photo of Wendy Miller
            Wendy Miller Post author

            I realized that if you copy and paste the code directly from this community page, it puts in the alternate “curly” quote characters rather than normal quote characters. That’s probably why it did not work at first.

  5. Profile photo of Tanya Seidel
    Tanya Seidel

    I was able to figure out the appropriate code that can be used to provide translated alternatives to ALL of the video player controls. The caveat is, only one of the combinations of the play/pause and mute/unmute buttons is on-screen at the time of page rendering, so you can only update the label for the play OR pause button and the mute OR unmute button, not all of them. I couldn’t figure out a way to trigger the script on play/pause or mute/unmute of the video to change these on the fly.

    It seems that Lectora has the back-end code (I dug into some of the JS files) to change these player labels based on the language set for the player, but that language doesn’t appear to be set anywhere to anything other than English. It would be great if this tied to the language defined in the title options, or the language defined in an associated caption file, OR maybe a new language property specifically for the video. 🙂

    In any case, here’s the code that can be used to change all of the labels associated with Lectora’s HTML5 video player, with a stab at setting these values to their appropriate Spanish equivalents (provided by Google translate, so maybe not the perfect translation):

    document.getElementById(‘mep_0_captions_none’).nextSibling.innerHTML = ‘nada’;
    document.getElementById(‘mep_0_captions_en’).nextSibling.innerHTML = ‘español’;

    buttons = document.getElementsByTagName(‘button’);
    i = 0;

    for (i = 0; i < buttons.length; i++) {
    if (buttons[i].hasAttribute('title')) {
    if (buttons[i].getAttribute('title') == 'Pause') {
    buttons[i].setAttribute("title", "Pausar");
    buttons[i].setAttribute("aria-label", "Pausar");
    }
    if (buttons[i].getAttribute('title') == 'Play') {
    buttons[i].setAttribute("title", "Jugar");
    buttons[i].setAttribute("aria-label", "Jugar");
    }
    if (buttons[i].getAttribute('title') == 'Captions/Subtitles') {
    buttons[i].setAttribute("title", "Subtítulos");
    buttons[i].setAttribute("aria-label", "Subtítulos");
    }
    if (buttons[i].getAttribute('title') == 'Mute') {
    buttons[i].setAttribute("title", "Silencio");
    buttons[i].setAttribute("aria-label", "Silencio");
    }
    if (buttons[i].getAttribute('title') == 'Unmute') {
    buttons[i].setAttribute("title", "Reanudar");
    buttons[i].setAttribute("aria-label", "Reanudar");
    }
    if (buttons[i].getAttribute('title') == 'Fullscreen') {
    buttons[i].setAttribute("title", "Pantalla Completa");
    buttons[i].setAttribute("aria-label", "Pantalla Completa");
    }
    }
    }

Your email address will not be published. Required fields are marked *