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.

  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

  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 *