Video Chapters & Chapter Markers

Working with video chapters

Using video chapters through videojs player is easy. 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 the WebVTT file URL in a <track> tag of video element. See full player setup code example with chapters defined.

Code snippet

<head>
  <link href="//domain.com/videojs/skins/skinname/videojs.min.css" rel="stylesheet" />
</head>

<body>
<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>

Chapters loaded as a <track> video element may not show on iOS devices. If you care about iOS chapters you can always load chapters programmatically, using 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 progress bar you can set 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>