Clappr queue plugin

Demo

https://joaopaulovieira.github.io/clappr-queue-plugin/

Table of Contents

• Features
• Usage
• Configuration
• API Documentation
• Development

Features

🎬 Play videos in sequence

The first media in the queue starts immediately after the current media ends. The plugin provides one API to play any media in the queue in any order you want.

📝 Set configs at plugin initialization

Define if the queue plugin plays the next video or just load.

🧰 Update video queue dynamically

Use the plugin or player reference to add/remove videos in the queue.

Usage

You can use it from JSDelivr:

https://cdn.jsdelivr.net/npm/clappr-queue-plugin@latest/dist/clappr-queue-plugin.min.js

or as an npm package:

# Using yarn
yarn add clappr-queue-plugin

# Using npm
npm i clappr-queue-plugin

Then just add the QueuePlugin into the list of plugins of your player instance and set the media(s) to play in sequence on queue.nextVideos config:

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  plugins: [QueuePlugin],
  queue: { nextVideos: ['http://another.video/here.mp4'] },
});

Configuration

The options for the plugin go in the queue property as shown below:

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  plugins: [QueuePlugin],
  queue: {
    nextVideos: ['http://another.video/here.mp4'],
    autoPlayNextVideo: true,
  },
});

nextVideos {Array}

An array where each item should be one video source URL.

autoPlayNextVideo {Boolean}

Defines if the queue plugin should play the media after it's loaded. The plugin does not mutate the Clappr option autoPlay.

API Documentation

Plugin API

method	arguments	description
plugin.appendVideo	URL or [URL, ...]	Adds the video URL(s) at the end of the queue.
plugin.prependVideo	URL or [URL, ...]	Adds the video URL(s) at the top of the queue.
plugin.popVideo		Removes the video URL at the end of the queue.
plugin.shiftVideo		Removes the video URL at the top of the queue.
plugin.playNextVideo		Load and play (accordingly autoPlayNextVideo value) the video URL at the top of the queue.
plugin.playPosition	Number (position of the queue array)	Load and play (accordingly autoPlayNextVideo value) the video URL related to the position in the queue.
plugin.playItem	URL	Load and play (accordingly autoPlayNextVideo value) if the video URL is registered into the queue.
plugin.shuffleItems		Sort the items in the queue randomly.

getter	description	Response
plugin.videoQueue	Returns the video queue.	[URL, ...]

Player API

method	arguments	description
player.appendVideoOnQueue	URL or [URL, ...]	A external interface to use appendVideo via player instance.
player.prependVideoOnQueue	URL or [URL, ...]	A external interface to use prependVideo via player instance.
player.popVideoFromQueue		A external interface to use popVideo via player instance.
player.shiftVideoFromQueue		A external interface to use shiftVideo via player instance.
player.playNextVideoOnQueue		A external interface to use playNextVideo via player instance.
plugin.playQueuePosition	Number (position of the queue array)	A external interface to use playPosition via player instance.
plugin.playQueueItem	URL	A external interface to use playItem via player instance.
plugin.shuffleQueueItems		A external interface to use shuffleItems via player instance.

getter	description	Response
player.getVideoQueue	Returns the video queue.	[URL, ...]

Development

Install dependencies: npm install

Run: npm start

Test: npm test

Lint: npm run lint

Build: npm run build

Minified version: npm run release