@kokotree-inc/videojs-upnext-plugin
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

videojs-upnext-plugin

A plugin for video.js that displays an "Up Next" overlay when a video finishes playing.

Preview

Installation

Run npm install @kokotree-inc/videojs-upnext-plugin to install the plugin.

Usage

To use this plugin, simply import it and register it with your video.js player instance:

index.js

import videojs from 'video.js';
import '@kokotree-inc/videojs-upnext-plugin';

const player = videojs('my-player');

player.upnext({
  interval: 10,
  headText: 'Up Next',
  cancelText: 'Cancel',
  getTitle: () => {
    return 'Ocean Life';
  },
  getVideoImageUrl: () => {
    return 'https://vjs.zencdn.net/v/oceans.png';
  },
  playNext: () => {
    console.log('playNext');
  },
  cancel: () => {
    console.log('cancel');
  }
});

HTML

<html>
  <head>
    <link href="http://vjs.zencdn.net/8.9.0/video-js.css" rel="stylesheet" />

    <link href="index.css" rel="stylesheet" />
    <link href="upnext-styles.min.css" rel="stylesheet" />
  </head>
  <body>
    <div class="vid-container">
      <div
        class="video-js vjs-default-skin video-js-upnext-demo-player vjs-fluid video-js-upnext-demo-player-video-dimensions vjs-controls-enabled">
        <video id="video" controls></video>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

You can get upnext-styles.min.css from the root of this package.

Plugin Options

Option Type Default Description
interval number 20 The interval, in seconds, before the next video starts playing.
headText string 'Up Next' The text displayed at the top of the Up Next card.
cancelText string 'Cancel' The text displayed on the Cancel button.
getTitle function () => '' A function that returns the title of the next video to be played.
getVideoImageUrl function () => '' A function that returns the URL of the image to be displayed on the Up Next card.
playNext function () => {} A function that is called when the user clicks the "Play Next" button.
cancel function () => {} A function that is called when the user clicks the "Cancel" button.

Readme

Keywords

Package Sidebar

Install

npm i @kokotree-inc/videojs-upnext-plugin

Weekly Downloads

1

Version

2.0.1

License

MIT

Unpacked Size

20 kB

Total Files

5

Last publish

Collaborators

  • kokotree