videojs-chapter-thumbnails

3.2.0 • Public • Published

videojs-chapter-thumbnails

Build Status

Video.js plugin for supporting WebVTT chapter thumbnails.

Example

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: Function
Default:

template(cue = {}, textTrack) {
  let cueText;
 
  // NOTE: if `cue.text` isn't parseable, just send it through instead of blowing up.
  // DRAGON: this probably opens up a possible script injection
  try {
    cueText = JSON.parse(cue.text || '{}');
  } catch (e) {
    cueText = cue.text;
  }
 
  const {
    image,
    title,
  } = cueText;
 
  const template = document.createElement('div');
  template.className = 'vjs-chapters-thumbnails-item';
 
  if (image) {
    const img = document.createElement('img');
    img.className = 'vjs-chapters-thumbnails-item-image';
    img.src = image;
 
    template.appendChild(img);
  }
 
  if (title) {
    const span = document.createElement('span');
    span.className = 'vjs-chapters-thumbnails-item-title';
    span.innerHTML = title;
 
    template.appendChild(span);
  }
 
  return template;
},

Provides for custom chapter templating. Must return either HTMLElement or string.

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.2.0
    2
    • latest

Version History

Package Sidebar

Install

npm i videojs-chapter-thumbnails

Weekly Downloads

2

Version

3.2.0

License

MIT

Last publish

Collaborators

  • chemoish