Video Chapters & Chapter Markers

STANDARD

PREMIUM

GOLD

Using video chapters through the VideoJs player is easy. The Nuevo plugin extends chapters to show visible progress bar markers, each with the chapter's label tooltip on mouse over, just like in the example above.
Chapters are loaded from a text file in WebVTT format, for example:

Code snippet

WEBVTT

00:00:00.000 --> 00:00:30.000
Chapter I

00:00:30.000 --> 00:00:56.000
Chapter II

00:00:56.000 --> 00:05:34.000
Chapter III

00:05:34.000 --> 00:07:16.000
Credits

The server hosting the chapters.vtt file must have Cross-Origin Resource Sharing (CORS) enabled.
You must refer to the WebVTT file URL in a <track> tag of the video element. See the full player setup code example with chapters defined.

Code snippet

<link href="//domain.com/videojs/skins/skinname/videojs.min.css" rel="stylesheet" />
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>
<video id="player_one" class="video-js" controls preload playsinline width="640" height="360" crossorigin="anonymous" poster="//www.domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video.mp4" type="video/mp4" />
<track kind="chapters" src="//domain.com/path/to/chapters.vtt" srclang="en">
</video>
<script>
var options = {option1:'option', option2:'option2'}; // Nuevo plugin options
var player = videojs('player_one');
player.nuevo (options);
</script>

You can also load chapters programmatically using the dedicated Nuevo plugin function, which you can call once video data is loaded.

Code snippet

<script>
var chapters = {kind:"chapters", src:"//domain.com/path/to/chapters.vtt", srclang="en"};
player.on('loadeddata', function(){ player.loadTracks(chapters); });
</script>

If you prefer not to show chapter markers over the progress bar you can set the Nuevo plugin option chapterMarkers to false.

Code snippet

<script>
var options = {chapterMarkers:false}; // Nuevo plugin options
var player = videojs('player_one');
player.nuevo (options};
</script>

Or just

Code snippet

<script>
var player = videojs('player_one');
player.nuevo ({chapterMarkers:false}};
</script>