HTML5 - A player with a clickable transcript

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 see how we can 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 this time we can choose the track. In the example we have English and German subtitles, and also another track that contains the chapter descriptions (more on that later). By clicking on a button we display the transcript 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 set the id attribute of the <li> with 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 this time location.
4. We add to each cue an enter and an exit listener. 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 aTextTrack 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="http://...../elephants-dream-medium.mp4"
13.              type="video/mp4">
14.      <source src="http://...../elephants-dream-medium.webm"
15.              type="video/webm">
16.      <track label="English subtitles"
17.             kind="subtitles"
18.             srclang="en"
19.             src="http://...../elephants-dream-subtitles-en.vtt" >
20.      <track label="Deutsch subtitles"
21.             kind="subtitles"
22.             srclang="de"
23.             src="http://...../elephants-dream-subtitles-de.vtt"
24.             default>
25.      <track label="English chapters"
26.             kind="chapters"
27.             srclang="en"
28.             src="http://...../elephants-dream-chapters-en.vtt">
29. </video>
30. <div id="transcript"></div>
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: GETTING 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 was very 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://..../elephants-dream-medium.mp4" type="video/mp4">
4.     <source src="https://..../elephants-dream-medium.webm" type="video/webm">
5.     <track label="English subtitles" kind="subtitles" srclang="en"
6.            src="https://..../elephants-dream-subtitles-en.vtt" default>
7.     <track label="Deutsch subtitles" kind="subtitles" srclang="de"
8.            src="https://..../elephants-dream-subtitles-de.vtt">
9.     <track label="English chapters" kind="chapters" srclang="en"
10.            src="https://..../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.     <div id="transcript"></div>
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. }

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 basic usage of the 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 buttons, to toggle the mode of each 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 example below we have a WebVTT file containing the descriptions of a scene being played.

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://...../sintel.jpg"
8.         crossorigin="anonymous"
9.         controls="controls"
10.         width="640" height="272">
12.     <source src="https://...../sintel.mp4"
13.             type="video/mp4" />
14.     <source src="https://...../sintel.webm"
15.             type="video/webm" />
16.     <track src="https://...../sintel-captions.vtt"
17.            kind="captions"
18.            label="English Captions"
19.            default/>
20.     <track src="https://...../sintel-descriptions.vtt"
21.            kind="descriptions"
22.            label="Audio Descriptions" />
23.     <track src="https://...../sintel-chapters.vtt"
24.            kind="chapters"
25.            label="Chapter Markers" />
26.     <track src="https://...../sintel-thumbs.vtt"
27.            kind="metadata"
28.            label="Preview Thumbs" />
29.   </video>
30. </p>
32. <p>
33.    <div id="currentTrackStatuses"></div>
34. <p>
35. <p>
36.    <div id="subtitlesCaptions"></div>
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. }

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 supports by the different browsers, as at April 2015. Note that currently (in October 2015), neither Chrome nor FireFox offers a menu to choose the track to display. 

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

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

HTML code:

1. ...
2. <body onload="init()">
3.  ...
4. <video id="myVideo" preload="metadata" controls crossOrigin="anonymous" >
5.      <source src="http://...../elephants-dream-medium.mp4"
6.              type="video/mp4">
7.      <source src="http://...../elephants-dream-medium.webm"
8.              type="video/webm">
9.      <track  label="English subtitles"
10.              kind="subtitles"
11.              srclang="en"
12.              src="http://...../elephants-dream-subtitles-en.vtt"
13.              default>
14.      <track  label="Deutsch subtitles"
15.              kind="subtitles"
16.              srclang="de"
17.              src="http://...../elephants-dream-subtitles-de.vtt">
18.      <track  label="English chapters"
19.              kind="chapters"
20.              srclang="en"
21.              src="http://...../elephants-dream-chapters-en.vtt">
22. </video>
23. <h3>Current track: <span id="currentLang"></span></h3>
24. <div id="langButtonDiv"></div>
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: There is an online tutorial at MDN that goes much further in terms of styling and integrating a "CC" button. If you are interested in building a complete custom video player, you might take a look.

Example 4: making a simple chapter navigation menu

INTRODUCTION

You can use WebVTT files in order to define chapters. The syntax is exactly the same as for subtitles/caption .vtt files. The only difference is in the declaration of the track. Here is how we declared a chapter track in one of the previous examples (in bold in the example below):

HTML code:

1. <video id="myVideo" preload="metadata" controls crossOrigin="anonymous">
2.      <source src="http://...../elephants-dream-medium.mp4"
3.              type="video/mp4">
4.      <source src="http://...../elephants-dream-medium.webm"
5.              type="video/webm">
6.      <track label="English subtitles"
7.             kind="subtitles"
8.             srclang="en"
9.             src="http://...../elephants-dream-subtitles-en.vtt" >
10.      <track label="Deutsch subtitles"
11.             kind="subtitles"
12.             srclang="de"
13.             src="http://...../elephants-dream-subtitles-de.vtt"
14.             default>
15.      <track label="English chapters"
16.             kind="chapters"
17.             srclang="en"
18.             src="http://...../elephants-dream-chapters-en.vtt">
19. </video>

If we try this code in an HTML document, nothing special happens. No magic menu, no extra button!

Currently (as at November 2015), no browser takes chapter tracks into account. You can use one of the enhanced video players presented during the HTML5 Part 1 course, but as you will see in this lesson: making your own chapter navigation menu is not complicated.

FIRST, LET'S HAVE A LOOK AT THE .VTT FILES FROM THIS EXAMPLE:

elephant-dream-chapters-en.vtt:

1. WEBVTT
2.  
3. chapter-1
4. 00:00:00.000 --> 00:00:26.000
5. Introduction
6.  
7. chapter-2
8. 00:00:28.206 --> 00:01:02.000
9. Watch out!
10.  
11. chapter-3
12. 00:01:02.034 --> 00:03:10.000
13. Let's go
14.  
15. chapter-4
16. 00:03:10.014 --> 00:05:40.000
17. The machine
18.  
19. chapter-5
20. 00:05:41.208 --> 00:07:26.000
21. Close your eyes
22.  
23. chapter-6
24. 00:07:27.125 --> 00:08:12.000
25. There's nothing there
26.  
27. chapter-7
28. 00:08:13.000 --> 00:09:07.500
29. The Colossus of Rhodes

We've got 7 cues (one for each chapter). Each cue id is chapter- followed by the chapter number, then we have the start and end time of the cue/chapter, and the cue content. In this case: the description of the chapter ("Introduction", "Watch out!", "Let's go", etc...).

Hmm... let's try to open this chapter track with the example we wrote in a previous lesson - the one that displayed the clickable transcript for subtitles/captions on the right of the video. We need to modify it a little bit:

1. We add a "show English chapters" button with a click event listener similar to this :
   
   
   1. <button disabled id="buttonEnglishChapters" onclick="loadTranscript('en','chapters');">
   2.     Display English chapter markers
   3. </button>
2. We modify the loadTranscript function from the previous example, so that it matches both thesrclang and the kind attribute of the track.
   
   Here is a new version: in bold are the source code lines we modified.
   
   
   1. function loadTranscript(lang, kind) {
   2.    ...
   4.    // Locate the track with lang and kind that match the parameters
   5.    for(var i = 0; i < tracks.length; i++) {
   6.       ...
   8.       if((track.language === lang) && (track.kind === kind)) {
   9.          // display it contents...
   10.       }
   11.    }
   12. }

FIRST VERSION : CHAPTERS AS CLICKABLE TEXT ON THE RIGHT OF THE VIDEO

Try it on JSBin; this version includes the modifications we presented earlier - nothing more. Notice that we kept the existing buttons to display a clickable transcript:

Look at the JavaScript and HTML tab of the JSBin example to see the source code. It's the same as in the clickable transcript example, except for the small changes we explained earlier.

This sort of navigation, illustrated in the video player below, is fairly popular.

In addition to the clickable chapter list, this one displays an enhanced progress bar created using a canvas. The small squares are drawn depending on the chapter cues start and end time, etc. You can try to modify the provided example in order to add such an enhanced progress indicator.

However, we will see how we can do better by using JSON objects as cue contents. This is the topic of the two next lessons!