Playlists are a great way to give your audience more options. If they liked your default video, why not present them with more content to enjoy? Video Cloud makes it easy to curate playlists by hand or automatically through tagging. Once you have playlists created in your account, they're super easy to use with the Brightcove Player.
There are two methods for putting the Brightcove Player into your site and it's simple to add a playlist to either. With the iframe embedding mode, just append a query parameter with the ID or reference ID of the playlist you want to load:
<iframe src="//players.brightcove.net/1234/abc-123-def_default/index.html?playlistId=ref:example"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen>
</iframe>The Brightcove Player can be configured to display a playlist menu with the currently loaded playlist videos alongside your player.
To enable the playlist menu, you need to add "playlist": true to your player configuration through the Player Management API.
Player Management is a REST API so you can use a variety of tools to interact with it.
If you were using curl, you could PATCH your player configuration to enable the playlist menu like this:
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"playlist": true
}' \
https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configurationYou can use playlists with an in-page embed through a new data attribute:
<video
data-playlist-id="5678"
data-account="1234"
data-player="abc-123-def"
data-embed="default"
class="video-js"
controls>
</video>
<script src="//players.brightcove.net/1234/abc-123-def_default/index.min.js"></script>The in-page embed allows you to choose where you'd like the playlist menu to be displayed.
First, follow the Player Management steps above to enable the playlist menu with your player.
Then, place an <ol> element with the class vjs-playlist wherever you'd like the playlist menu to appear in your page.
If you wanted it to appear directly alongside your player, you might set it up like this:
<video
data-playlist-id="5678"
data-account="1234"
data-player="abc-123-def"
data-embed="default"
class="video-js"
controls>
</video>
<ol class="vjs-playlist"></ol>
<script src="//players.brightcove.net/1234/abc-123-def_default/index.min.js"></script>If you're unsure which embed code to use, start with the iframe. The iframe embed is designed to be the simplest way to get up and running while the in-page embed is intended for advanced customizations.
Once you have loaded in your playlist, you can use the playlist API to interact with it. It's a pretty simple API. Here it is in a nutshell:
// Calling `player.playlist` returns an array representation of the playlist
player.playlist();
// => [{sources: ["http:....mp4"]}, {sources: ["https:....webm"]}]
// calling player.playlist.next() advances to the next item in the video
player.playlist.next();
// => {sources: ["https:....webm"]}
// calling player.playlist.previous() returns to the previous item in the playlist
player.playlist.previous();
// => {sources: ["http:....mp4"]}
// calling player.playlist.autoadvance() with a number, will set up the player to auto advance to the next item when the current item finishes playing
player.playlist.autoadvance(5);
// when the current item finishes, the next item will start playing after `5` seconds
// player.playlist() can also be given a new playlist to switch to.
player.playlist(newPlaylist);
// => [{sources: ["https:....m3u8"]}]
// Also, when switching playlists, a `playlistchange` event gets triggered
player.on('playlistchange', function() {
console.log('woohoo, we loaded in a new playlist');
});If you want to make sure that your controls stay aligned over the content of your player, you need to include information about the aspect ratio of the videos you intend to use.
When using the player without the playlist menu, you can do that by providing media.width and media.height values in your player configuration.
When you're using an iframe embed with the playlist menu, you have to remember to account for the width of the playlist.
Luckily, the playlist menu is setup to always take up 30% of the available width of the iframe so this calculation is pretty easy.
Let's say you plan on playing back a playlist of 640 pixels wide by 360 pixels high. In that case, you'd want 640 pixels to make up 70% of the width of your iframe. You can find the exact width like this:
VIDEO_WIDTH / 0.7 = PLAYER_WIDTH
PATCH that number into your player configuration and you're good to go:
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"media": {
"width": "914px",
"height": "360px"
}
}' \
https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configurationDon't worry if you have some videos in your playlist that are available at higher resolutions. The exact numbers aren't the important bit-- as long as the aspect ratio of your videos match up, the player is smart enough to adjust.
A playlist can also be loaded programmatically with the new catalog.getPlaylist method. Afterwards, it can be given to catalog.load just like a video.
player.catalog.getPlaylist(function(err, playlist) {
if (err) {
throw err;
}
player.catalog.load(playlist);
});Just like videos, it's possible to associate a playlist with a player in your player configuration, instead of through the embed code.
To do so, add a "playlist" property to the "video_cloud" object in your player configuration.
You can specify a playlist by ID or reference ID, just like you could in your embed code:
{
"video_cloud": {
"playlist": "ref:stitch"
}
}A playlist isn't anything special. It's just a regular array with objects inside. Each object has a few properties that make it work as a playlist item, the most important one being sources. Here's a sample object with a lot of properties filled in:
{
"name": "Disney's Oceans",
"description": "Explore the depths of our planet\'s oceans. Experience the stories that connect their world to ours.",
"duration": 45,
"sources": [
{ "src": "http://vjs.zencdn.net/v/oceans.mp4", "type": "video/mp4" },
{ "src": "http://vjs.zencdn.net/v/oceans.webm", "type": "video/webm" },
],
"poster": "http://www.videojs.com/img/poster.jpg",
"textTracks": [{
"kind": "captions",
"srclang": "en",
"label": "English",
"src": "http://vjs.zencdn.net/4.12/demo.captions.vtt"
}],
"thumbnail": [ {
"srcset": "test/example/oceans.jpg",
"type": "image/jpeg",
"media": "(min-width: 400px;)"
}, {
"src": "test/example/oceans-low.jpg"
}],
}So a full playlist would look something like:
[{
"sources": [
{ "src": "http://vjs.zencdn.net/v/oceans.mp4", "type": "video/mp4" },
{ "src": "http://vjs.zencdn.net/v/oceans.webm", "type": "video/webm" },
],
}, {
"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": []
}]It's possible to set up the player to autoadvance by default by setting the autoadvance property. The following example will enable an autoadvance of 5 seconds.
{
"video_cloud": {
"playlist": "ref:stitch"
},
"autoadvance": 5
}It's possible to disable playlists by setting playlist to false.
{
"video_cloud": {
"playlist": "ref:stitch"
},
"playlist": false
}Unless you're absolutely sure your player won't be used with playlists, it's safer to keep it in there.