@kokotree-inc/videojs-upnext-plugin
v2.0.1
Published
Video.js UpNext plugin that enables auto-play of next video and shows an end card after the main video has ended.
Downloads
5
Readme
videojs-upnext-plugin
A plugin for video.js that displays an "Up Next" overlay when a video finishes playing.
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. |