van an nguyen

Example 3: adding buttons for choosing the subtitle/caption track

You may have noticed that with many browsers, the standard implementation of the video element does not let the user choose the subtitle language…

Read this article by Ian Devlin about the current status of multiple WebVTT track support by the different browsers, as at May 2015. Note that currently (July 2016), neither Chrome nor FireFox offers a menu to choose the track to display. 

However, it’s easy to implement this feature using the Track API.

Here is a simple example at JSBin: we added two buttons below the video to enable/disable subtitles/captions and let you choose which track you prefer. 

Buttons for choosing the track/language under a standard video player

HTML code:

  1. …
  2. <body onload=”init()”>
  3.  …
  4. <video id=”myVideo” preload=”metadata” controls crossOrigin=”anonymous” >
  5.      <source src=”https://&#8230;../elephants-dream-medium.mp4″
  6.              type=”video/mp4″>
  7.      <source src=”https://&#8230;../elephants-dream-medium.webm”
  8.              type=”video/webm”>
  9.      <track  label=”English subtitles”
  10.              kind=”subtitles”
  11.              srclang=”en”
  12.              src=”https://&#8230;../elephants-dream-subtitles-en.vtt”
  13.              default>
  14.      <track  label=”Deutsch subtitles”
  15.              kind=”subtitles”
  16.              srclang=”de”
  17.              src=”https://&#8230;../elephants-dream-subtitles-de.vtt”>
  18.      <track  label=”English chapters”
  19.              kind=”chapters”
  20.              srclang=”en”
  21.              src=”https://&#8230;../elephants-dream-chapters-en.vtt”>
  22. </video>
  23. <h3>Current track: <span id=”currentLang”></span></h3>
  25. </section>
  26. …

JavaScript code:

  1. var langButtonDiv, currentLangSpan, video;
  2.  
  3. function init() {
  4.    langButtonDiv = document.querySelector(“#langButtonDiv”);
  5.    currentLangSpan = document.querySelector(“#currentLang”);
  6.    video = document.querySelector(“#myVideo”);
  8.    console.log(“Number of tracks = “
  9.                + video.textTracks.length);
  10.    // Updates the display of the current track activated
  11.    currentLangSpan.innerHTML = activeTrack();
  12.    // Build the buttons for choosing a track
  13.    buildButtons();
  14. }
  15.  
  16. function activeTrack() {
  17.    for (var i = 0; i < video.textTracks.length; i++) {
  18.       if(video.textTracks[i].mode === ‘showing’) {
  19.          return video.textTracks[i].label + ” (“
  20.                 + video.textTracks[i].language + “)”;
  21.       }
  22.    }
  23.    return “no subtitles/caption selected”;
  24. }
  25.  
  26. function buildButtons() {
  27.    if (video.textTracks) { // if the video contains track elements
  28.       // For each track, create a button
  29.       for (var i = 0; i < video.textTracks.length; i++) {
  30.          // We create buttons only for the caption and subtitle tracks
  31.          var track = video.textTracks[i];
  32.          if((track.kind !== “subtitles”) && (track.kind !== “captions”))
  33.             continue;
  35.          // create a button for track number i         
  36.          createButton(video.textTracks[i]); 
  37.       }
  38.    }
  39. }
  41. function createButton(track) {
  42.    // Create a button
  43.    var b = document.createElement(“button”);
  44.    b.value=track.label;
  45.    // use the lang attribute of the button to keep trace of the
  46.    // associated track language. Will be useful in the click listener
  47.    b.setAttribute(“lang”, track.language); 
  48.    b.addEventListener(‘click’, function(e) {
  49.      // Check which track is the track with the language we’re looking for
  50.      // Get the value of the lang attribute of the clicked button
  51.      var lang = this.getAttribute(‘lang’); 
  53.      for (var i = 0; i < video.textTracks.length; i++) {
  54.        if (video.textTracks[i].language == lang) {
  55.           video.textTracks[i].mode = ‘showing’;
  56.        } else {
  57.           video.textTracks[i].mode = ‘hidden’;
  58.        }
  59.      }
  60.      // Updates the span so that it displays the new active track
  61.     currentLangSpan.innerHTML = activeTrack();
  62.   });
  63.   // Creates a label inside the button
  64.   b.appendChild(document.createTextNode(track.label));
  65.   // Add the button to a div at the end of the HTML document
  66.   langButtonDiv.appendChild(b);
  67. }

External resource: If you are interested in building a complete custom video player, MDN offers an online tutorial with further information about styling and integrating a “CC” button. 

Leave a comment