https://github.com/videojs/videojs-playlist
Playlist plugin for videojs
https://github.com/videojs/videojs-playlist
Last synced: 11 months ago
JSON representation
Playlist plugin for videojs
- Host: GitHub
- URL: https://github.com/videojs/videojs-playlist
- Owner: videojs
- License: other
- Created: 2015-02-23T19:30:43.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T15:31:00.000Z (over 1 year ago)
- Last Synced: 2025-07-05T20:44:10.595Z (11 months ago)
- Language: JavaScript
- Size: 2.55 MB
- Stars: 374
- Watchers: 58
- Forks: 124
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# videojs-playlist
[](https://travis-ci.org/brightcove/videojs-playlist)
[](https://greenkeeper.io/)
[](http://slack.videojs.com)
[](https://nodei.co/npm/videojs-playlist/)
A plugin to enable playlists in video.js
Maintenance Status: Stable
- [Installation](#installation)
- [Inclusion](#inclusion)
- [Basic Usage](#basic-usage)
- [License](#license)
## Installation
Install videojs-playlist via npm (preferred):
```sh
$ npm install videojs-playlist
```
## Inclusion
Include videojs-playlist on your website using the tool(s) of your choice.
The simplest method of inclusion is a `` tag after the video.js `<script>` tag:
```html
<script src="path/to/video.js/dist/video.js">
```
When installed via npm, videojs-playlist supports Browserify-based workflows out of the box.
## Basic Usage
For full details on how to use the playlist plugin can be found in [the API documentation](docs/api.md).
```js
// Initialize Video.js player
const player = videojs('video');
// Initialize the playlist plugin
const playlistPlugin = player.playlistPlugin();
// Retrieve the PlaylistPlugin class
// This is used to access static methods of the PlaylistPlugin
const PlaylistPluginClass = videojs.getPlugin('playlistPlugin');
const videoList = [{
sources: [{
src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
sources: [{
src: 'http://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}],
poster: 'http://www.videojs.com/img/poster.jpg'
}];
// Create a new Playlist instance from the video list
// This utilizes a static method of the PlaylistPlugin class to create a Playlist instance
const playlist = PlaylistPluginClass.createPlaylistFrom(videoList);
// Playlist methods - Manage Playlist Content and Indexing
// Methods under Playlist are focused on direct manipulation of the playlist content (add, remove, shuffle, reverse etc)
// and controlling playlist indexing (getNextIndex, getPreviousIndex, enableRepeat, disableRepeat, etc), but not how the player uses the playlist
playlist.add({
// video item details
});
playlist.remove(0);
playlist.shuffle();
playlist.reverse();
playlist.enableRepeat();
playlist.disableRepeat();
// Plugin methods - Integrate Playlist with the Player
// Methods under PlaylistPlugin are focused on how the playlist is used by the player
// This includes loading the playlist into the player, handling playback, and setting auto-advance behavior
playlistPlugin.loadPlaylist(playlist);
playlistPlugin.loadFirstItem();
playlistPlugin.setAutoadvanceDelay(0);
// Play the currently loaded playlist item
player.play();
```
## License
Apache-2.0. Copyright (c) Brightcove, Inc.