Example 1: a video player with clickable transcript – reading WebVTT file content at once

A few words about the set of five examples presented in this chapter: the code of the examples is larger than usual, but each example integrates blocks of code already presented and detailed in the previous lessons.

Creating an accessible player with a clickable transcript of the video presentation

It might be interesting to read the content of a track before playing the video. This is what the edX video player does: it reads a single subtitle file and displays it as a transcript on the right. In the transcript, you can click on a sentence to make the video jump to the corresponding location. We will learn how to do this using the track API.

Example 1: read the webvtt file at once using the track api and make a clickable transcript

Here we decided to code something similar, except that we will offer a choice of track/subtitle language. Our example offers English or German subtitles, and also another track that contains the chapter descriptions (more on that later). Using a button to select a language (track), the appropriate  transcript is displayed on the right. Like the edX player, we can click on any sentence in order to force the video to jump to the corresponding location. While the video is playing, the current text is highlighted.

Some important things here:

1. Browsers do not load all the tracks at the same time, and the way they decide when and which track to load differs from one browser to another. So, when we click on a button to choose the track to display, we need to enforce the loading of the track, if it has not been loaded yet.
2. When a track file is loaded, then we iterate on the different cues and generate the transcript as a set of <li>…</li> elements. One <li>per cue/sentence. 
3. We define the id attribute of the <li> to be the same as the cue.id value. In this way, when we click on a <li> we can get its id and find the corresponding cue start time, and make the video jump to that time location.
4. We add an enter and an exit listener to each cue. These will be useful for highlighting the current cue. Note that these listeners are not yet supported by FireFox (you can use a cuechange event listener on a TextTrack instead – the source code for FireFox is commented in the example).

Try this example at JSBin:

HTML code:

1. <section id=”all”>
2. <button disabled id=”buttonEnglish”
3.          onclick=”loadTranscript(‘en’);“>
4.     Display English transcript
5.  </button>
6. <button disabled id=”buttonDeutsch”
7.          onclick=”loadTranscript(‘de’);“>
8.     Display Deutsch transcript
9. </button>
10. </p>
11. <video id=”myVideo” preload=”metadata” controls crossOrigin=”anonymous”>
12.      <source src=”https://&#8230;../elephants-dream-medium.mp4″
13.              type=”video/mp4″>
14.      <source src=”https://&#8230;../elephants-dream-medium.webm”
15.              type=”video/webm”>
16.      <track label=”English subtitles”
17.             kind=”subtitles”
18.             srclang=”en”
19.             src=”https://&#8230;../elephants-dream-subtitles-en.vtt” >
20.      <track label=”Deutsch subtitles”
21.             kind=”subtitles”
22.             srclang=”de”
23.             src=”https://&#8230;../elephants-dream-subtitles-de.vtt”
24.             default>
25.      <track label=”English chapters”
26.             kind=”chapters”
27.             srclang=”en”
28.             src=”https://&#8230;../elephants-dream-chapters-en.vtt”>
29. </video>
31. </section>

CSS code:

1. #all {
2.    background-color: lightgrey;
3.    border-radius:10px;
4.    padding: 20px;
5.    border:1px solid;
6.    display:inline-block;
7.    margin:30px;
8.    width:90%;
9. }
10.  
11. .cues {
12.    color:blue;
13. }
14.  
15. .cues:hover {
16.    text-decoration: underline;
17. }
18.  
19. .cues.current {
20.    color:black;
21.    font-weight: bold;
22. }
23.  
24. #myVideo {
25.    display: block;
26.    float : left;
27.    margin-right: 3%;
28.    width: 66%;
29.    background-color: black;
30.    position: relative;
31. }
32.  
33. #transcript {
34.    padding: 10px;
35.    border:1px solid;
36.    float: left;
37.    max-height: 225px;
38.    overflow: auto;
39.    width: 25%;
40.    margin: 0;
41.    font-size: 14px;
42.    list-style: none;
43. }

JavaScript code:

1. var video, transcriptDiv;
2. // TextTracks, html tracks, urls of tracks
3. var tracks, trackElems, tracksURLs = []; 
4. var buttonEnglish, buttonDeutsch;
5.  
6. window.onload = function() {
7.    console.log(“init”);
8.    // when the page is loaded, get the different DOM nodes
9.    // we’re going to work with
10.    video = document.querySelector(“#myVideo”);
11.    transcriptDiv = document.querySelector(“#transcript”);
13.    // The tracks as HTML elements
14.    trackElems = document.querySelectorAll(“track”);
    
16.    // Get the URLs of the vtt files
17.    for(var i = 0; i < trackElems.length; i++) {
18.       var currentTrackElem = trackElems[i];
19.       tracksURLs[i] = currentTrackElem.src;
20.    }
22.    buttonEnglish = document.querySelector(“#buttonEnglish”);
23.    buttonDeutsch = document.querySelector(“#buttonDeutsch”);
25.    // we enable the buttons only in this load callback,
26.    // we cannot click before the video is in the DOM
27.    buttonEnglish.disabled = false;
28.    buttonDeutsch.disabled = false;
30.    // The tracks as TextTrack JS objects
31.    tracks = video.textTracks;
32. };
33.  
34. function loadTranscript(lang) {
35.   // Called when a button is clicked
37.   // clear current transcript
38.   clearTranscriptDiv();
40.   // set all track modes to disabled. We will only activate the
41.   // one whose content will be displayed as transcript
42.   disableAllTracks();
44.   // Locate the track with language = lang
45.   for(var i = 0; i < tracks.length; i++) {
46.     // current track
47.     var track = tracks[i];
48.     var trackAsHtmlElem = trackElems[i];
50.     // Only subtitles/captions are ok for this example…
51.     if((track.language === lang) && (track.kind !== “chapters”)) {
52.        track.mode=”showing”;
53.  
54.        if(trackAsHtmlElem.readyState === 2) {
55.           // the track has already been loaded
56.           displayCues(track);
57.        } else {
58.           displayCuesAfterTrackLoaded(trackAsHtmlElem, track);
59.        }
61.        /* Fallback for FireFox that still does not implement cue enter and exit events
    
62.          track.addEventListener(“cuechange”, function(e) {
63.              var cue = this.activeCues[0];
64.              console.log(“cue change”);
65.              var transcriptText = document.getElementById(cue.id);
66.              transcriptText.classList.add(“current”);
67.          });
68.       */
69.     }
70.   }
71. }
73. function displayCuesAfterTrackLoaded(trackElem, track) {
74.   // Create a listener that will only be called once the track has
75.   // been loaded. We cannot display the transcript before
76.   // the track is loaded
77.    trackElem.addEventListener(‘load’, function(e) {
78.       console.log(“track loaded”);
79.       displayCues(track);
80.    });
81. }
83. function disableAllTracks() {
84.   for(var i = 0; i < tracks.length; i++)
85.      // the track mode is important: disabled tracks do not fire events
86.      tracks[i].mode = “disabled”; 
87. }
88.  
89. function displayCues(track) { 
90.    // displays the transcript of a TextTrack
91.    var cues = track.cues;
93.    // iterate on all cues of the current track
94.    for(var i=0, len = cues.length; i < len; i++) {
95.       // current cue, also add enter and exit listeners to it
96.       var cue = cues[i];
97.       addCueListeners(cue);
98.  
99.       // Test if the cue content is a voice <v speaker>….</v>
100.       var voices = getVoices(cue.text);
101.       var transText=””;
102.       if (voices.length > 0) {
103.          for (var j = 0; j < voices.length; j++) { // how many voices?
104.             transText += voices[j].voice + ‘: ‘ + removeHTML(voices[j].text);
105.          }
106.       } else
107.          transText = cue.text; // not a voice text
109.       var clickableTransText = “<li class=’cues’ id=” + cue.id
110.                                + ” onclick=’jumpTo(“
111.                                + cue.startTime + “);'” + “>”
112.                                + transText + “</li>”;
113.  
114.       addToTranscriptDiv(clickableTransText);
115.    }
116. }
117.  
118. function getVoices(speech) { 
119.    // takes a text content and check if there are voices
120.    var voices = []; // inside
121.    var pos = speech.indexOf(‘<v’); // voices are like <v Michel> ….
122.    while (pos != -1) {
123.       endVoice = speech.indexOf(‘>’);
124.       var voice = speech.substring(pos + 2, endVoice).trim();
125.       var endSpeech = speech.indexOf(‘</v>’);
126.       var text = speech.substring(endVoice + 1, endSpeech);
127.       voices.push({
128.           ‘voice’: voice,
129.           ‘text’: text
130.       });
131.       speech = speech.substring(endSpeech + 4);
132.       pos = speech.indexOf(‘<v’);
133.   }
134.   return voices;
135. }
136.  
137. function removeHTML(text) {
138.   var div = document.createElement(‘div’);
139.   div.innerHTML = text;
140.   return div.textContent || div.innerText || ”;
141. }
143. function jumpTo(time) {
144.   // Make the video jump at the time position + force play
145.   // if it was not playing
146.   video.currentTime = time;
147.   video.play();
148. }
149.  
150. function clearTranscriptDiv() {
151.   transcriptDiv.innerHTML = “”;
152. }
153.  
154. function addToTranscriptDiv(htmlText) {
155.   transcriptDiv.innerHTML += htmlText;
156. }
157.  
158. function addCueListeners(cue) {
159.   cue.onenter = function(){
160.      // Highlight current cue transcript by adding the
161.      // cue.current CSS class
162.      console.log(‘enter id=’ + this.id);
163.      var transcriptText = document.getElementById(this.id);
164.      transcriptText.classList.add(“current”);
165. };
166.  
167. cue.onexit = function(){
168.    console.log(‘exit id=’ + cue.id);
169.    var transcriptText = document.getElementById(this.id);
170.    transcriptText.classList.remove(“current”);
171. };
173. } // end of addCueListeners…

Example 2: LOAD a WebVTT file using Ajax/XHR2 and parse it manually

This is an old example written in 2012 at a time when the track API was not supported by browsers. It downloads WebVTT files using Ajax and parses it “by hand”. Notice the complexity of the code, compared to example 1 that uses the track API instead. We give this example as is. Sometimes, bypassing all APIs can be a valuable solution, especially when support for the track API is sporadic, as was the case in 2012…

Here is an example at JSBin that displays the values of the cues in the different tracks:

This example, adapted from an example from (now offline) dev.opera.com, uses some JavaScript code that takes a WebVTT subtitle (or caption) file as an argument, parses it, and displays the text on screen, in an element with an id of transcript.

Extract from HTML code:

1. …
2. <video preload=”metadata” controls >
3.     <source src=”https://&#8230;./elephants-dream-medium.mp4″ type=”video/mp4″>
4.     <source src=”https://&#8230;./elephants-dream-medium.webm” type=”video/webm”>
5.     <track label=”English subtitles” kind=”subtitles” srclang=”en”
6.            src=”https://&#8230;./elephants-dream-subtitles-en.vtt” default>
7.     <track label=”Deutsch subtitles” kind=”subtitles” srclang=”de”
8.            src=”https://&#8230;./elephants-dream-subtitles-de.vtt”>
9.     <track label=”English chapters” kind=”chapters” srclang=”en”
10.            src=”https://&#8230;./elephants-dream-chapters-en.vtt”>
11. </video>
12.  …
13.    <h3>Video Transcript</h3>
14.    <button onclick=”loadTranscript(‘en’);”>English</button>
15.    <button onclick=”loadTranscript(‘de’);”>Deutsch</button>
16.     </div>
17.     
18. …

JavaScript code:

1. // Transcript.js, by dev.opera.com
2. function loadTranscript(lang) {
3.    var url = “http://mainline.i3s.unice.fr/mooc/” +
4.        ‘elephants-dream-subtitles-‘ + lang + ‘.vtt’;
6.    // Will download using Ajax + extract subtitles/captions   
7.    loadTranscriptFile(url); 
8. }
9.  
10. function loadTranscriptFile(webvttFileUrl) {
11.    // Using Ajax/XHR2 (explained in detail in Week 3)
12.    var reqTrans = new XMLHttpRequest();
14.    reqTrans.open(‘GET’, webvttFileUrl);
16.    // callback, called only once the response is ready
17.    reqTrans.onload = function(e) { 
19.        var pattern = /^([0-9]+)$/;
20.        var patternTimecode = /^([0-9]{2}:[0-9]{2}:[0-9]{2}[,.]{1}[0-9]{3}) –\> ([0-9]
21.                              {2}:[0-9]{2}:[0-9]{2}[,.]{1}[0-9]{3})(.*)$/;
23.        var content = this.response; // content of the webVTT file
25.        var lines = content.split(/\r?\n/); // Get an array of text lines
26.        var transcript = ”;
27.        for (i = 0; i < lines.length; i++) {
28.          var identifier = pattern.exec(lines[i]);
30.          // is there an id for this line, if it is, go to next line
31.          if (identifier) { 
32.            i++;
33.            var timecode = patternTimecode.exec(lines[i]); 
34.            // is the current line a timecode?
35.            if (timecode && i < lines.length) {      
36.               // if it is go to next line     
37.               i++;
38.               // it can only be a text line now
39.               var text = lines[i];  
40.                         
41.               // is the text multiline?
42.               while (lines[i] !== ” && i < lines.length) {   
43.                  text = text + ‘\n’ + lines[i];
44.                  i++;
45.               }
47.               var transText = ”;
48.               var voices = getVoices(text);
49.               // is the extracted text multi voices ? 
50.               if (voices.length > 0) {
51.                  // how many voices ?
52.                  for (var j = 0; j < voices.length; j++) { 
53.                  transText += voices[j].voice + ‘: ‘
54.                            + removeHTML(voices[j].text)
55.                            + ‘<br />’;
56.               }
57.           } else 
58.              // not a voice text
59.              transText = removeHTML(text) + ‘<br />’; 
61.          transcript += transText;
62.        }
63.      }
65.      var oTrans = document.getElementById(‘transcript’);
66.      oTrans.innerHTML = transcript;
67.    }
68. };
69.  reqTrans.send(); // send the Ajax request
70. }
71.  
72. function getVoices(speech) {  // takes a text content and check if there are voices 
73.   var voices = [];            // inside
74.   var pos = speech.indexOf(‘<v’); // voices are like <v Michel> ….
76.   while (pos != -1) {
77.     endVoice = speech.indexOf(‘>’);
78.     var voice = speech.substring(pos + 2, endVoice).trim();
79.     var endSpeech = speech.indexOf(‘</v>’);
80.     var text = speech.substring(endVoice + 1, endSpeech);
81.     voices.push({
82.        ‘voice’: voice,
83.        ‘text’: text
84.     });
85.     speech = speech.substring(endSpeech + 4);
86.     pos = speech.indexOf(‘<v’);
87.   }
88.   return voices;
89. }
90.  
91. function removeHTML(text) {
92.   var div = document.createElement(‘div’);
93.   div.innerHTML = text;
94.   return div.textContent || div.innerText || ”;
95. }