97 lines
2.5 KiB
Markdown
97 lines
2.5 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||
|
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||
|
|
|
||
|
|
|
||
|
|
- [Installation](#installation)
|
||
|
|
- [Inclusion](#inclusion)
|
||
|
|
- [Basic Usage](#basic-usage)
|
||
|
|
- [License](#license)
|
||
|
|
|
||
|
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
Install videojs-playlist via npm (preferred):
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ npm install videojs-playlist
|
||
|
|
```
|
||
|
|
|
||
|
|
Or Bower:
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ bower install videojs-playlist
|
||
|
|
```
|
||
|
|
|
||
|
|
## Inclusion
|
||
|
|
|
||
|
|
Include videojs-playlist on your website using the tool(s) of your choice.
|
||
|
|
|
||
|
|
The simplest method of inclusion is a `<script>` tag after the video.js `<script>` tag:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="path/to/video.js/dist/video.js"></script>
|
||
|
|
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
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
|
||
|
|
var player = videojs('video');
|
||
|
|
|
||
|
|
player.playlist([{
|
||
|
|
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'
|
||
|
|
}, {
|
||
|
|
sources: [{
|
||
|
|
src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
|
||
|
|
type: 'video/mp4'
|
||
|
|
}],
|
||
|
|
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
|
||
|
|
}, {
|
||
|
|
sources: [{
|
||
|
|
src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
|
||
|
|
type: 'video/mp4'
|
||
|
|
}],
|
||
|
|
poster: 'http://media.w3.org/2010/05/video/poster.png'
|
||
|
|
}]);
|
||
|
|
|
||
|
|
// Play through the playlist automatically.
|
||
|
|
player.playlist.autoadvance(0);
|
||
|
|
```
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
Apache-2.0. Copyright (c) Brightcove, Inc.
|