@guzzj/clappr-queue-plugin NPM

Coveralls github Travis (.com)

Clappr queue plugin

Demo

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

Features

:clapper: 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.

:memo: Set configs at plugin initialization

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

:toolbox: 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

clappr plugin queue sequence playlist

@everything-registry/sub-chunk-380 v-clappr-player @zalastax/nolb-_guz

1.1.0

3 years ago

@guzzj/clappr-queue-plugin v1.1.0