Add chapter markers (Web Player)

Learn how to add chapter markers to a video.


A chapter marker provides a way to convey viewing milestones within the timeline of a player. It allows the segmentation of long videos into discrete segments.

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 web player when a standard WebVTT text track is provided in the player embed code.



Create a .vtt file

Use the following steps to create a .vtt file:

  1. In a text editor, create a new file.

  2. Add information for cue timings and chapter titles. Cue identifiers are optional.


    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
    

    AttributeDescription
    Cue timings(Required) Specifies the time zone for the cue

    For example : 00:04:44.000 --> 00:05:50.000

    The chapter will be displayed on the start of the zone.
    Chapter title(Required) The title you want to display for the chapter.

    For example : Chapter 3
    Cue identifier(Optional) Used to identify the actual cue point

    For example : The attack

  1. Save the file. A .vtt file should always be saved in UTF8 encoding to prevent character issues.

🚧

A .vtt file is subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player.



Add the VTT track to your embed

After you have created the .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 the following example.

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
});