videojs-chapter-thumbnails

Video.js plugin for supporting WebVTT chapter thumbnails.

Getting Started

Include

<!-- optional: default styles -->
<link href="/path/to/videojs.chapter-thumbnails.min.css" rel="stylesheet">

<script src="/path/to/videojs.chapter-thumbnails.min.js"></script>

Enable

videojs('player_id').chapter_thumbnails({
    src: '/path/to/chapters.vtt'
});

Note: There are multiple ways to enable plugins. For more information, please visit Video.js.

Options

label

Type: String
Default: English

language

Type: String
Default: en

src

Type: String

template

Type: String
Default:

<div class="vjs-chapters-thumbnails-item">
    <img class="vjs-chapters-thumbnails-item-image" src="{{image}}" />
    <span class="vjs-chapters-thumbnails-item-title">{{title}}</span>
</div>

Provides for custom templating. Utilize {{key}} to target values in your WebVTT file.

Example WebVTT file

Define chapters plugin by specifying a WebVTT spec.

WEBVTT

Chapter 1
00:00:00.000 --> 00:00:10.000
{
    "title":"Chapter 1",
    "image":"asset/img/chapter_1.png"
}

Contributing + Example

npm install -g grunt-cli

npm install

npm start

License

Code licensed under The MIT License.