van an nguyen

Example 4: making a simple chapter navigation menu

Introduction

Simple chapter navigation

We can use WebVTT files 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=”https://&#8230;../elephants-dream-medium.mp4″
  3.              type=”video/mp4″>
  4.      <source src=”https://&#8230;../elephants-dream-medium.webm”
  5.              type=”video/webm”>
  6.      <track label=”English subtitles”
  7.             kind=”subtitles”
  8.             srclang=”en”
  9.             src=”https://&#8230;../elephants-dream-subtitles-en.vtt” >
  10.      <track label=”Deutsch subtitles”
  11.             kind=”subtitles”
  12.             srclang=”de”
  13.             src=”https://&#8230;../elephants-dream-subtitles-de.vtt”
  14.             default>
  15.     <track label=”English chapters”
  16.             kind=”chapters”
  17.             srclang=”en”
  18.             src=”https://&#8230;../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 (July 2016), no browser takes chapter tracks into account. You could 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.

let’s START by examining the SAMPLE .vtt file:

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

There are 7 cues (one for each chapter). Each cue id is the word “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 the srclang 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. }

simple approach: 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:

Simple chapter navigation

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.

Chapter navigation, illustrated in the video player below, is fairly popular.

Example of video player that uses text based chapter navigation

In addition to the clickable chapter list, this one displays an enhanced progress bar created using a canvas. The small squares are drawn corresponding to the chapter cues’ start and end times. You could modify the code provided, 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 will be the topic of the next two lessons!

Leave a comment