videojs-bif

Video.js plugin for supporting BIF.

For more information on BIF, see https://sdkdocs.roku.com/display/sdkdoc/Trick+Mode+Support.

Getting Started

Include

<script src="/path/to/videojs.bif.min.js"></script>

Enable

// Generally BIF files are large, so you have the ability to manage fetching on your own.
// If this is the route you take, you can update plugin configuration at any time by rerunning the plugin.
//
// See documentation or example for more detail.
videojs('player_id').bif({
  src: '/path/to/bif.bif',
});

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

Options

[createBIFImage]

Type: function
Default:

createBIFImage() {
  const BIFImage = document.createElement('img');

  BIFImage.className = 'bif-image';

  return BIFImage;
}

Will be updated with new image previews—dependent on the current mouse over time in the video.

[createBIFTime]

Type: function
Default:

createBIFTime() {
  const BIFTime = document.createElement('span');

  BIFTime.className = 'bif-time';

  return BIFTime;
}

Will be updated with new time—dependent on the current mouse over time in the video.

data

Type: ArrayBuffer

[template]

Type: function
Default:

template() {
  const template = document.createElement('div');

  template.className = 'bif';

  // append image element only if the images are ready
  if (this.hasImages()) {
    template.appendChild(this.BIFImage);
  }

  template.appendChild(this.BIFTime);

  return template;
}

Will be updated every time configuration changes—default implementation will show time immediately, then show images when available.

[src]

Type: string

The source must abide by the BIF format.

Contributing + Example

npm install -g grunt-cli

npm install

npm start

License

Code licensed under The MIT License.