@viostream/videojs-chapters NPM

videojs-chapters

A videojs plugin to display chapters in one of the following formats:

as markers on the progress bar with a hover over text description
a dropdown list below the player
a horizonal control below the player for selecting chapters

Installation

npm install --save @Viostream/videojs-chapters

Usage

To include videojs-chapters on your website or web application, use any of the following methods.

`<script>` Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-chapters.min.js"></script>
<script>
  var player = videojs('my-video');

  var chaptersArray = [
        {label: 'Chapter 1', time: '5'},
        {label: 'Chapter 2', time: '10'},
        {label: 'Chapter 3', time: '15'}
      ];

  var chapterOptions = {
        chapterType: 'horizontal'
        chapters: chaptersArray,
        styles: {
          background: '#000',
          color: '#aaa',
          backgroundActive: '#333',
          colorActive: '#fff'
        }
      }

  player.chapters(chapterOptions);
</script>