@viostream/videojs-chapters

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

Table of Contents

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>

Options

The chapter options passed to the plugin are

chapterType

Type: string Default: "horizontal"

This is the type of chapter control that will be rendered, the options are

• horizontal
• dropdown
• progressbar

chapters

Type: array Default: null

This is an array of chapter data, composed of label and time in seconds, as shown above.

styles

Type: object Default: null

This is an object where you can specify colors for the plugin, as shown above.

License

License

MIT. Copyright (c) Viostream