A Multi-Playlist Player for HTML5 Using the Media API with the Smart Player API

HTML5 players do not support multiple playlists, but you can overcome that using the Media API and Smart Player API together. See the sample player below.

Scan the QR from your iPhone or iPad to load this page on your device

Note: this solution uses Media API read methods that are available to Express Plan I, Professional, and Enterprise accounts.

The buttons below are for development purposes only, to switch between Flash and HTML5 players. Do not use these in production, as the method is unsupported. You should let the Smart Player decide whether to load Flash or HTML5 instead.


The solution here uses the Video Cloud Media API find_playlists_by_ids method to retrieve a set of playlist objects. The playlists that I'm using have thumbnail URLs added in the Media section of the Video Cloud Studio. The playlist information is written into the HTML DOM, and selecting a playlist writes the individual video data into the DOM using the same data retrieved through the Media API call. The Smart Player API then takes over to load videos into the player -- it's just a standard chromeless player with the Player API enabled. The full script code is shown below,

// BCL Media API search maker -- adapted from JS-MAPI on opensource.brightcove.com
// namespace to keep all the "global" vars together
var BCL = {};
BCL.token = "WDGO_XdKqXVJRVGtrNuGLxCYDNoR-SvA5yUqX2eE6KjgefOxRzQilw..";
BCL.callback = "BCL.onSearchResponse";
BCL.url = "http://api.brightcove.com/services/library";
BCL.command = "find_playlists_by_ids";
BCL.params = {"playlist_ids" : "1323984736001,1323984734001,1323984733001,1323984735001"};
 * Injects API calls into the head of a document
BCL.injectScript = function () {
	console.log("Injecting script")
	var scriptElement = document.createElement("script");
	BCL.srcValue = BCL.url + "?command=" + BCL.command + "&token=" + BCL.token + "&callback=" + BCL.callback;
	for (var param in BCL.params) {
		BCL.srcValue += "&" + param + "=" + BCL.params[param];
	scriptElement.setAttribute("src", BCL.srcValue);
	scriptElement.setAttribute("type", "text/javascript");
BCL.onSearchResponse = function(jsonData) {
	// save the jsonData for select listener
	BCL.jsonData = jsonData;
	var str = "<table id=\"playlistTable\" cellspacing=\"10\"><tbody><tr>";
	var html = "";
	for (var i = 0; i < jsonData["items"].length; i++) {
		var playlist = jsonData["items"][i];
		html = "<td onclick=\"BCL.onPlaylistSelect(" + i +")\"><img src=\"{{thumbnailURL}}\" width=\"120\" height=\"70\" /><br />{{name}}</td>";
		str += BCL.markup(html,playlist);
	str += "</tr></tbody></table>";
	document.getElementById("results").innerHTML = str;
	// load the first playlist
// player API code
// event listener for the player being ready
BCL.onTemplateReady = function(event) {
  // load the playlists
  BCL.player = brightcove.api.getExperience("myExperience");
  BCL.videoPlayer = BCL.player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
// listener for playlist selection
BCL.onPlaylistSelect = function(index) {
	var str = "<table cellspacing=\"5\"><tbody>";
	var html = "";
	for (var i = 0; i < BCL.jsonData["items"][index]["videos"].length; i++) {
		var video = BCL.jsonData["items"][index]["videos"][i];
		html = "<tr class=\"playlistTR\"><td><a onclick='BCL.playVideo({{id}})'><img height='54' width='96' src='{{thumbnailURL}}'/></a></td><td width=\"130\"><a onclick='BCL.playVideo({{id}})'><strong>{{name}}</strong><br/>{{shortDescription}}</a><br/>";
		str += BCL.markup( html , video );
		str += "</tbody></table>";
		document.getElementById("playlist").innerHTML = str;
// play video function
BCL.playVideo = function(videoID) {
// for development purposes only: reopen page with HTML5 player
BCL.switchToHTML5 = function() {
	var html5URL = document.location.href + "?forceHTML=true";
	window.location = html5URL;
// for development purposes only: switch back to Flash
BCL.switchToFlash = function() {
	var startOfQuery = document.location.href.indexOf("?", 0);
	var flashURL = document.location.href.substring(0, startOfQuery);
	window.location = flashURL;
simple HTML templating function
 array example:
   demo.markup("<div>{{1}}, {{0}}</div>", ["John", "Doe"]);
 object example:
   demo.markup("<div>{{last}}, {{first}}</div>", {first:"John", last:"Doe"});
BCL.markup = function (html, data) {
    var m;
    var i = 0;
    var match = html.match(data instanceof Array ? /{{\d+}}/g : /{{\w+}}/g) || [];

    while (m = match[i++]) {
        html = html.replace(m, data[m.substr(2, m.length-4)]);

    return html;