# Chapters

ByteArk Player can split a video into named chapters, like YouTube. Viewers see where each chapter starts, which chapter they are watching, and can jump straight to one. Set chapters on each video's source object.

# How chapters appear

Seek bar: split into one segment per chapter. Hovering the seek bar shows the chapter title under the hover time. With Storyboard enabled, the title appears inside the thumbnail preview.
Control bar: the current chapter's title appears after the time. Clicking it opens the chapter list. It is hidden on small players.
Settings → Chapters: lists every chapter's start time and title, with the current chapter checked. With Storyboard enabled, each row also shows a thumbnail. Clicking a chapter jumps to its start; a paused video stays paused and a playing one keeps playing.

Chapters on the seek bar

# Options

Set chapters on each video's source object, as a WebVTT file or a list of items. Each source and each playlist item can have its own chapters.

Name	Type	Required	Description
chapters	Object	No	Chapter configuration. Use either `src` or `items`.
chapters.src	String	No	URL of a chapter WebVTT file
chapters.items	Array	No	List of chapters, each `{ startTime, title }`
chapters.items[].startTime	Number	Yes	Chapter start time, in seconds
chapters.items[].title	String	Yes	Chapter title

# From a WebVTT file

var player = bytearkPlayer('video-player', {
  sources: [{
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    chapters: {
      src: 'https://example.com/chapters/big-buck-bunny.vtt'
    }
  }]
});

1
2
3
4
5
6
7
8
9
10

# From a list of items

var player = bytearkPlayer('video-player', {
  sources: [{
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    chapters: {
      items: [
        { startTime: 0, title: 'Opening Titles' },
        { startTime: 24, title: 'A Peaceful Morning in the Forest' },
        { startTime: 75, title: 'Big Buck Wakes Up' }
      ]
    }
  }]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# The chapter file

A standard WebVTT file. Each cue's start time and text become one chapter:

WEBVTT
chapter-1
00:00:00.000 --> 00:00:24.000
Opening Titles
chapter-2
00:00:24.000 --> 00:01:15.000
A Peaceful Morning in the Forest
chapter-3
00:01:15.000 --> 00:02:15.000
Big Buck Wakes Up

1
2
3
4
5
6
7
8
9
10
11
12
13

Each chapter runs until the next chapter starts, and the last one runs to the end of the video. A cue's end time is ignored.
Chapters starting at or after the end of the video are dropped.
Titles are plain text. Tags in a cue are removed.
The file is loaded with a plain GET, so its server must allow your page's origin through CORS.

# Methods

Method	Return	Description
`player.chapters()`	Array	All chapters as `{ startTime, endTime, title }`, in order. Times are in seconds. Returns `[]` when there are no chapters, the file failed to load, or the video is a live stream.
`player.currentChapter()`	Object	The chapter at the current playback time as `{ startTime, endTime, title }`, or `null` when there is none.

To jump to a chapter, call player.currentTime(chapter.startTime).

# Events

Event	Description
`chapterschange`	The chapter list loaded or changed, for example after the source changed. Call `player.chapters()` to read it.
`chapterchange`	The current chapter changed, through playback, a seek, or a new chapter list. The listener receives `(event, data)`, where `data.chapter` is the new current chapter or `null`. It does not fire on every time update.

# Example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      bytearkPlayer('video-player', {
        fluid: true,
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
          chapters: {
            src: 'https://example.com/chapters/big-buck-bunny.vtt'
          }
        }]
      }, function () {
        var player = this;
        player.on('chapterschange', function () {
          console.log('Chapters:', player.chapters());
        });
        player.on('chapterchange', function (event, data) {
          console.log('Now playing:', data.chapter ? data.chapter.title : 'no chapter');
        });
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# Limits

Live streams never show chapters, including DVR.
Titles are not translated. They are shown exactly as set.

← Skip Intro Button Context Menu →