Skip to content

joaopaulovieira/clappr-queue-plugin

Repository files navigation

npm bundle size Coveralls github Travis (.com)

Clappr queue plugin

Demo

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

Table of Contents

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