Chapters

When you play a movie in DVD or Blu-Ray format, a menu appears on the screen: play a movie, choose subtitles, etc. Usually there is also a "chapters" menu that allows you to quickly access a part of the movie. With videos on the Web, one can also indicate the chapter breakdown, using WebVTT files and a <track> element/tag.

Adding chapters is very similar to adding subtitles/captions. Look at line 5 in the code below, where we use an extra <track> element with a kind="chapters" attribute.

<video poster="webvtt_talk.png" style="width:100%" preload="metadata">

    <source src="webvtt_talk.webm">

    <source src="webvtt_talk.mp4">

    <source src="webvtt_talk.ogv">

    <track id="nav" src="webvtt_talk_navigation.vtt" kind="chapters" srclang="en">

    <track id="cc" src="webvtt_talk_captions.vtt" kind="captions"

          label="captions" srclang="en" default>

</video>

The following listing presents an example of WebVTT files with defined chapters. Each "CUE" at lines 3, 7, 11, ... can bear any name. We use "Chapter 1, Chapter 2, Ending, etc." but you are free to name them as you wish.

What makes them special is that the track has an attribute kind="chapters". 

Often, <video> element chapters are ignored when rendered by standard browsers, but enhanced HTML5 players do process them. It's not much of a stretch to make your own enhanced player with a nice chapter presentation, as we'll see in a more advanced chapter of this course.  For example, we'll generate a custom navigation menu, using the <track> JavaScript API (explained later in this section).

Example of a WebVTT file that defines chapters:

WEBVTT FILE

Chapter 1

00:00:00.000 --> 00:00:10.700

Title Slide

Chapter 2

00:00:10.700 --> 00:00:47.600

Introduction by Naomi Black

Chapter 3

00:00:47.600 --> 00:01:50.100

Impact of Captions on the Web

Chapter 4

00:01:50.100 --> 00:03:33.000

Requirements of a Video text format

Ending

00:03:33.000 --> 00:04:57.766

Simple WebVTT file

Greetings 6

00:04:57.766 --> 00:06:16.666

Styled WebVTT file

An example of what you can achieve using chapters, using the JW Player: