Working with video chapters
Using video chapters through videojs player is easy. Nuevo plugin extends chapters to show visible progressbar markers, each with chapter's label tooltip on mouse over, just like in example above.Chapters are loaded from 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 should also 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 <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 Nuevo plugin is loaded.
Code snippet
<script> var chapters = {kind:"chapters", src:"//domain.com/path/to/chapters.vtt", srclang="en"}; player.on('nuevoReady', function(){ player.loadTracks(chapters); }); </script>
If you prefer not to show chapter markers over progressbar 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>
Code snippet
<script> var player = videojs('player_one'); player.nuevo ({chapterMarkers:false}}; </script>