Adding Chapter Markers

JW Player supports the rendering of chapter markers within the timeslider. These work particularly well for long form video, to segment it into discreet sections. Here is a live example:

 

A viewer can quickly hover over the cue point and can see the title of the chapter or section. Clicking on the cue point navigates you directly to that point of the video. These markers are rendered by the JW Player when a standard WebVTT text track is provided in the player embed code.

Adding chapters to the JW Player is accomplished in two easy steps

Step 1: Create Chapters VTT File

To display chapters within the timeslider you first need to have a VTT file with the following information:

Cue identifier (optional )
Used to identify the actual cue point.
Cue timings (required)
Specifies the time zone for the cue. The chapter will be displayed on the start of the zone.
Chapter title(required)
The actual title you want displayed.

This format is easy to understand and can be authored with a simple text editor:

WEBVTT

Chapter 1
00:00:00.000 --> 00:01:42.000
Opening credits

Chapter 2
00:01:42.000 --> 00:04:44.000
A dangerous quest

Chapter 3
00:04:44.000 --> 00:05:50.000
The attack

Notes:

  • The title that gets displayed in the tooltip is the text located beneath the time.
  • VTT files should always be saved in UTF8 encoding to prevent character issues.
  • VTT files are subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player. See Crossdomain File Loading for more info.

Step 2: Add the track to your embed

After you have your VTT file with chapter cues, you need to add it to your player embed code. This gets added to the tracks configuration block with the kind set to chapters.

The full player embed code for above live example looks like:

var playerInstance = jwplayer("container");
playerInstance.setup({
  file: "/upload/sintel.mp4",
  image: "/upload/sintel.jpg",
  tracks: [{
    file:'/upload/chapters.vtt',
    kind:'chapters'
  }],
  width: 640,
  height: 270
});

Note the timeslider skin element can be customized. See the Skin CSS Reference for more info.

Chapters can also be loaded as part of RSS feeds. See the RSS Feeds Reference for more info.

Did you find this article helpful?

Please log in to rate this article.