pillarbox-playlist 1.0.0
Install from the command line:
Learn more about npm packages
$ npm install @srgssr/pillarbox-playlist@1.0.0
Install via package.json:
"@srgssr/pillarbox-playlist": "1.0.0"
About this version
This plugin extends the pillarbox-web player with playlist management capabilities. It allows to load, manage, and control playback of a sequence of videos with options for auto-advancing, repeating content, and dynamic playlist modification.
To use this plugin, you need the following installed on your system:
- Node.js
To get started with this plugin, follow these steps:
Add the @srgssr registry to your .npmrc file:
//npm.pkg.github.com/:_authToken=TOKEN
@srgssr:registry=https://npm.pkg.github.com
Generate a personal access token on the [Personal Access Tokens page][token-settings]. For more information on using tokens with GitHub packages, visit: [Authenticating with a Personal Access Token][token-guide].
You can now install it through npm the following command:
npm install --save @srgssr/pillarbox-web @srgssr/pillarbox-playlistFor instructions on setting up Pillarbox, see the Quick Start guide.
Once the player is installed you can activate the plugin as follows:
import Pillarbox from '@srgssr/pillarbox-web';
import '@srgssr/pillarbox-playlist';
import '@srgssr/pillarbox-playlist/ui';
const player = new Pillarbox('my-player', {
plugins: {
pillarboxPlaylist: { autoadvance: true, repeat: true },
pillarboxPlaylistUI: { insertChildBefore: 'fullscreenToggle' }
}
});
const playlist = [
{ sources: [{ src: 'video1.mp4', type: 'video/mp4' }], poster: 'poster1.jpg' },
{ sources: [{ src: 'video2.mp4', type: 'video/mp4' }], poster: 'poster2.jpg' }
];
player.playlistPlugin().load(playlist);[!TIP] To opt-out of the default UI, simply remove the
pillarboxPlaylistUIplugin from the player configuration.
The following table outlines the key methods available in the this plugin:
| Function | Description |
|---|---|
load(items) |
Initializes the playlist with the given items and starts playback from the first item. |
push(...items) |
Adds new items to the end of the current playlist. |
splice(start, deleteCount, ...items) |
Modifies the playlist by adding, removing, or replacing items. Adjusts the current index if necessary. |
clear() |
Clears the internal playlist. Does not stop or unload the currently playing media. |
next() |
Advances to the next item in the playlist, with support for repeat mode. |
previous() |
Moves to the previous item in the playlist. |
shuffle() |
Randomizes the order of the playlist items using the Fisher-Yates shuffle algorithm. |
select(index) |
Selects and plays the item at the specified index in the playlist. |
toggleRepeat(force) |
Toggles the repeat mode of the player to the opposite of its current state, or sets it to the specified boolean value if provided. |
toggleAutoadvance(force) |
Toggles the auto-advance mode of the player to the opposite of its current state, or sets it to the specified boolean value if provided. |
When initializing the playlist plugin, you can pass an options object that configures the
behavior of the plugin. Here are the available options:
| Option | Type | Default | Description |
|---|---|---|---|
playlist |
Array | [] |
An array of playlist items to be initially loaded into the player. |
repeat |
Boolean | false |
If true, the playlist will start over automatically after the last item ends. |
autoadvance |
Boolean | false |
If enabled, the player will automatically move to the next item after the current one ends. |
After initializing the plugin, you can modify or read these properties to control playlist behavior dynamically:
| Property | Type | Description |
|---|---|---|
repeat |
Boolean | Enables or disables repeating the playlist once the last item has played. Changes take effect immediately and apply to subsequent operations. |
autoadvance |
Boolean | Toggles automatic advancement to the next item when the current item ends. |
The following properties are read-only:
| Property | Type | Description |
|---|---|---|
currentIndex |
Number | Retrieves the index of the currently playing item. |
currentItem |
Object | Retrieves the currently playing item. |
items |
Array | Retrieves all items in the playlist. Modifications to the returned array will not affect the internal state of the playlist. |
For detailed contribution guidelines, refer to the main project’s README file. Please adhere to the specified guidelines.
Start the development server:
npm run startThis will start the server on http://localhost:4200. Open this URL in your browser to view the
demo page.
The video player (player) and the Pillarbox library (pillarbox) are exposed on the window
object, making it easy to access and manipulate from the browser's developer console for debugging.
The demo page supports several URL parameters that modify the behavior of the video player:
-
debug: Set this to enable debugging mode. -
ilHost: Specifies the host for the data provider. -
language: Sets the language for the player interface.
You can combine parameters in the URL like so:
http://localhost:4200/?language=fr
This project is licensed under the MIT License. See the LICENSE file for more details.
