# 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

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
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][videojs], so that the `videojs` global is available.

```html
<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


[videojs]: http://videojs.com/