A playlist is a list of files that will be played by the MediaPlayer class. When you add a playlist to a MediaPlayer control, you can use button controls to move from one file in the playlist to the previous or next. This functionality is not automatically incorporated into the MediaPlayer control, but it can be easily added.
Adding playlist functionality
This section demonstrates how to create an app that supports playlist functionality. It adds the ability to go to the previous and next files by using the Previous Track and Next Track buttons.
The first step is to add a MediaPlayer object to the app. In this sample, it is added declaratively in the HTML file. It is important to note that the MediaPlayer object has three video tags in it. In this sample, we store the previous and next videos in addition to the currently playing video. You should also note the active-video and hidden-video styles. These are used to control whether the videos are visible in the MediaPlayer control.
<body>
<style>
body {
height: 100%;
width: 100%;
}
active-video {
display: inline;
height: 100%;
width: 100%;
}
hidden-video {
display:none;
}
</style>
<div id="myMediaPlayer">
<video></video>
<video></video>
<video></video>
</div>
</body>
This next section of code ensures that the chapter skip buttons are visible and enabled. They are not by default. The example assumes you have a MediaPlayer called "mediaPlayer" already created.
mediaPlayer.chapterSkipBackButtonEnabled = true;
mediaPlayer.chapterSkipBackButtonVisible = true;
mediaPlayer.chapterSkipForwardButtonEnabled = true;
mediaPlayer.chapterSkipForwardButtonVisible = true;
The remaining sections of code go in your JavaScript file.
The following section creates the playlist of files. You could create your own playlist by adding several videos to the playList variable. The order of the videos indicates how they will be played as the user activates the chapter skip buttons.
JavaScript
// The playlist of files
var playList = [
"http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4",
"http://smf.blob.core.windows.net/samples/videos/wildlife.mp4"
];
The helper functions shown in the next code block are called whenever the media changes. The first function updates the videos so that only the current video is displayed. The other videos need to be expressly hidden so that they are not visible to the user. The second helper function updates the chapter skip buttons so that they are disabled if there is no video to skip to.
JavaScript
// Some important variables
var previousMediaElement = null;
var currentMediaElement = null;
var nextMediaElement = null;
var mediaPlayer = null;
var currentPlaylistItem = 0;
// This function cycles the elements, hiding the previous and next videos
// and playing the current video
function updateMediaElements() {
previousMediaElement.classList.remove("active-video");
previousMediaElement.classList.add("hidden-video");
currentMediaElement.classList.remove("hidden-video");
currentMediaElement.classList.add("active-video");
nextMediaElement.classList.remove("active-video");
nextMediaElement.classList.add("hidden-video");
mediaPlayer.mediaElementAdapter.mediaElement = currentMediaElement;
mediaPlayer.play();
}
// A helper function to disable the chapter skip buttons based on the playlist
function updateTrackSkipButtons() {
// If we're not the first track, previous track should be available
if (currentPlaylistItem > 0) {
mediaPlayer.element.querySelector(".tv-mediaplayer-previoustrackbutton").disabled = false;
}
// Otherwise it should not be
else {
mediaPlayer.element.querySelector(".tv-mediaplayer-previoustrackbutton").disabled = true;
}
// If we're not the last track, next track should be available
if (currentPlaylistItem < playList.length - 1) {
mediaPlayer.element.querySelector(".tv-mediaplayer-nexttrackbutton").disabled = false;
}
// Otherwise it should not be
else {
mediaPlayer.element.querySelector(".tv-mediaplayer-nexttrackbutton").disabled = true;
}
}
// Initialize variables
var videos = document.getElementsByTagName("video");
previousMediaElement = videos[0];
currentMediaElement = videos[1];
nextMediaElement = videos[2];
mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
// Set up the initial values
if (currentPlaylistItem > 0) {
previousMediaElement.src="playList[currentPlaylistItem" - 1];
previousMediaElement.load();
}
else {
previousMediaElement.src="null;"
}
currentMediaElement.src="playList[currentPlaylistItem];"
if (currentPlaylistItem < playList.length - 1) {
nextMediaElement.src="playList[currentPlaylistItem" + 1];
nextMediaElement.load();
}
else {
nextMediaElement.src="null;"
}
// Update the media elements' display state and track buttons
updateMediaElements();
updateTrackSkipButtons();
// We need to override the previousTrack and nextTrack methods
// on the mediaElementAdapter
mediaPlayer.mediaElementAdapter.previousTrack = function () {
// Update the playlist item
currentPlaylistItem--;
// update our media elements
nextMediaElement.src="currentMediaElement.src;"
currentMediaElement.src="previousMediaElement.src;"
if (currentPlaylistItem > 0) {
previousMediaElement.src="playList[currentPlaylistItem" - 1];
}
else {
previousMediaElement.src="null;"
}
// Update the media elements' display state and track buttons
updateMediaElements();
updateTrackSkipButtons();
};
mediaPlayer.mediaElementAdapter.nextTrack = function () {
// Update the playlist item
currentPlaylistItem++;
// update our media elements
previousMediaElement.src="currentMediaElement.src;"
currentMediaElement.src="nextMediaElement.src;"
if (currentPlaylistItem < playList.length - 1) {
nextMediaElement.src="playList[currentPlaylistItem" + 1];
}
else {
nextMediaElement.src="null;"
}
// Update the media elements' display state and track buttons
updateMediaElements();
updateTrackSkipButtons();
};