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:
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.
<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"> <video id="player_one" class="video-js vjs-default-skin" 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>
If you prefer not to show chapter markers over progressbar you can set Nuevo plugin option chapterMarkers to false.
<script>
var options = {chapterMarkers:false}; // Nuevo plugin options
var player = videojs('player_one');
player.nuevo (options};
</script>
Or just
<script>
var player = videojs('player_one');
player.nuevo ({chapterMarkers:false}};
</script>