Node Packaged Masterfully

    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.

    Install

    npm i videojs-chapter-thumbnails

    DownloadsWeekly Downloads

    12

    Version

    3.2.0

    License

    MIT

    Last publish

    Collaborators

    • chemoish