van an nguyen

Example 2: Captions, Descriptions, Chapters, and MetaData

Example 2: showing video description while playing, listening to events, changing the mode of a track

Each track has a mode property (and a mode attribute) that can be: “disabled”, “hidden” or “showing”. More than one track at a time can be in any of these states.  The difference between “hidden” and “disabled” is that hidden tracks can fire events (more on that at the end of the first example) whereas disabled tracks do not fire events.

Here is an example at JSBin that shows the use of the mode property, and how to listen for cue events in order to capture the current subtitle/caption from JavaScript. You can change the mode of each track in the video element by clicking on its button. This will toggle the mode of that track. All tracks with mode=”showing” or mode=”hidden” will have the content of their cues displayed in real time in a small area below the video.

In the screen-capture below, we have a WebVTT file displaying a scene’s captions and descriptions.

Example that shows how to toggle track modes and listen to events

Extract from HTML code:

  1. <html lang=”en”>
  2. …
  3. <body onload=”init();”>
  4. …
  5. <p>
  6.   <video id=”myVideo” preload=”metadata”
  7.         poster =”https://&#8230;../sintel.jpg”
  8.         crossorigin=”anonymous”
  9.         controls=”controls”
  10.         width=”640″ height=”272″>
  12.     <source src=”https://&#8230;../sintel.mp4″
  13.             type=”video/mp4″ />
  14.     <source src=”https://&#8230;../sintel.webm”
  15.             type=”video/webm” />
  16.     <track src=”https://&#8230;../sintel-captions.vtt”
  17.            kind=”captions”
  18.            label=”English Captions”
  19.            default/>
  20.     <track src=”https://&#8230;../sintel-descriptions.vtt”
  21.            kind=”descriptions”
  22.            label=”Audio Descriptions” />
  23.     <track src=”https://&#8230;../sintel-chapters.vtt”
  24.            kind=”chapters”
  25.            label=”Chapter Markers” />
  26.     <track src=”https://&#8230;../sintel-thumbs.vtt”
  27.            kind=”metadata”
  28.            label=”Preview Thumbs” />
  29.   </video>
  30. </p>
  32. <p>
  33.    
  34. <p>
  35. <p>
  36.    
  37. </p>
  39. <p>
  40.    <button onclick=”clearSubtitlesCaptions();”>
  41.       Clear subtitles/captions log
  42.    </button>
  43. </p>
  44.  
  45. <p>Click one of these buttons to toggle the mode of each track:</p>

  46. <button onclick=”toggleTrack(0);”>
  47.      Toggle english caption track mode
  48.  </button>
  49.  <br>
  50. <button onclick=”toggleTrack(1);”>
  51.      Toggle audio description track mode
  52. </button>
  53. <br>
  54. <button onclick=”toggleTrack(2);”>
  55.      Toggle chapter track mode
  56. </button>
  57. <br>
  58. <button onclick=”toggleTrack(3);”>
  59.      Toggle preview thumbnail track modes
  60. </button>
  61.  
  62. </body>
  63. </html>

JavaScript code:

  1. var tracks, video, statusDiv, subtitlesCaptionsDiv;
  2.  
  3. function init() {
  4.    video = document.querySelector(“#myVideo”);
  5.    statusDiv = document.querySelector(“#currentTrackStatuses”);
  6.    subtitlesCaptionsDiv = document.querySelector(“#subtitlesCaptions”);
  7.    tracks = document.querySelectorAll(“track”);
  9.    video.addEventListener(‘loadedmetadata’, function() {
  10.       console.log(“metadata loaded”);
  12.       // defines cue listeners for the active track; we can do this only after the video metadata have been loaded
  13.       for(var i=0; i<tracks.length; i++) {
  14.          var t = tracks[i].track;
  15.          if(t.mode === “showing”) {
  16.             t.addEventListener(‘cuechange’, logCue, false);
  17.          }
  18.        }
  19.        // display in a div the list of tracks and their status/mode value
  20.        displayTrackStatus();  
  21.     });
  22. }
  23.  
  24. function displayTrackStatus() {
  25.     // display the status / mode value of each track.
  26.     // In red if disabled, in green if showing
  27.     for(var i=0; i<tracks.length; i++) {
  28.        var t = tracks[i].track;
  29.        var mode = t.mode;
  31.        if(mode === “disabled”) {
  32.           mode = “<span style=’color:red’>” + t.mode + “</span>”;
  33.        } else if(mode === “showing”) {
  34.           mode = “<span style=’color:green’>” + t.mode + “</span>”;
  35.        }
  36.        appendToScrollableDiv(statusDiv, “track ” + i + “: ” + t.label
  37.                                         + ” ” + t.kind+” in “
  38.                                         + mode + ” mode”);
  39.     }
  40. }
  41. function appendToScrollableDiv(div, text) {
  42.    // we’ve got two scrollable divs. This function
  43.    // appends text to the div passed as a parameter
  44.    // The div is scrollable (thanks to CSS overflow:auto)
  45.    var inner = div.innerHTML;
  46.    div.innerHTML = inner + text + “<br/>”;
  47.    // Make it display the last line appended
  48.    div.scrollTop = div.scrollHeight;
  49. }
  50.  
  51. function clearDiv(div) {
  52.    div.innerHTML = ”;
  53. }
  54.  
  55. function clearSubtitlesCaptions() {
  56.    clearDiv(subtitlesCaptionsDiv);
  57. }
  59. function toggleTrack(i) {
  60.    // toggles the mode of track i, removes the cue listener
  61.    // if its mode becomes “disabled”
  62.    // adds a cue listener if its mode was “disabled”
  63.    // and becomes “hidden”
  64.    var t = tracks[i].track;
  65.    switch (t.mode) {
  66.       case “disabled”:
  67.          t.addEventListener(‘cuechange’, logCue, false);
  68.          t.mode = “hidden”;
  69.          break;
  70.       case “hidden”:
  71.          t.mode = “showing”;
  72.          break;
  73.       case “showing”:
  74.          t.removeEventListener(‘cuechange’, logCue, false);
  75.          t.mode = “disabled”;
  76.          break;
  77.     }
  78.     // updates the status
  79.     clearDiv(statusDiv);
  80.     displayTrackStatus();
  81.     appendToScrollableDiv(statusDiv,”<br>” + t.label+” are now ” +t.mode);
  82. }
  83.  
  84. function logCue() {
  85.    // callback for the cue event
  86.    if(this.activeCues && this.activeCues.length) {
  87.       var t = this.activeCues[0].text; // text of current cue
  88.       appendToScrollableDiv(subtitlesCaptionsDiv, “Active “
  89.                                           + this.kind + ” changed to: ” + t);
  90.    }
  91. }

Leave a comment