Dynamically Loading Videos using the Smart Player API

The Smart Player API allows you to create custom dynamic solutions in JavaScript that work with both Flash and HTML players. This document includes a basic sample for dynamically assigning content using the Smart Player API.

Before you begin, acquaint yourself with an introduction to the Smart Player API and see Preparing a Player for the Smart Player API to get started with coding a solution for Flash and HTML players.

Play the sample

Important note for mobile developers: both iOS and Android require that initial video playback be initiated by the viewer. The methods <play(), loadVideoByID, and <loadVideoByReferenceID() will not start playback of a video on Android and iOS devices unless the viewer has already initiated playback of at least one video.

One of the most common uses for the Smart Player API is to dynamically load videos into a player. You can do this using the getter and setter methods of the Smart Player API's ContentModule class, or by using the loadVideoByID() or loadVideoByReferenceID() of the Video Player module. The loadVideo methods work because they automatically call back to the Video Cloud platform to fetch the video data if it is not already present. The Content Module methods are useful for fetching a full playlist, or for pre-fetching video data for faster loading of the individual videos if you are retrieving multiple videos. The sample here simply uses the loadVideoByID() method.

The example below shows a programmatic way to load videos into a player without using the Video Cloud Studio or creating playlists. In this example, a player loads and plays a video, and then loads and plays the next video. The example writes the name of the currently playing video.  

What you'll need

This document assumes you understand how to work with JavaScript in general. The Smart Player API Reference describes the available methods and events for each player component and provides examples for use. To step through the processes in this document and to create and test your sample solutions, you need the following:

• The Smart Player API reference
• A code or text editor
• A browser
• A Video Cloud Studio account
• Sample videos

How it works

Set up function to store a reference to the player and declare the required API modules and event listeners. Initialize an array of videos to loop through.

var player;  
  var modVP; 
  var nextVideo = 0; 
  var videos = new Array(1754276221001,1756137891001,1754276206001,1754276205001,1754234236001);    
  function myTemplateLoaded(experienceID) {   
    player = brightcove.api.getExperience(experienceID);   
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER); 
  }   
  function onTemplateReady(evt) {   
    modVP.loadVideoByID(videos[nextVideo]);   
    modVP.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaBegin);   
    modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaComplete); 
}

Note that the media BEGIN listener isn't functionally necessary to load the videos — it is used in the example to display the name of the video below the player

Add the function to loop through the array of videos when a video ends and load the next video:

function onMediaComplete(evt) {    
  nextVideo++;    
  if (nextVideo == videos.length) {     
    nextVideo = 0;    
  }    
  modVP.loadVideoByID(videos[nextVideo]);
}

Add the function to write the video name when the video changes.

function onMediaBegin(evt) {   
  document.getElementById("mediaInfo").innerHTML = evt.media.displayName; 
}

Include the Video Cloud publishing code with the required API parameters

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script> 
  <object id="myExperience928199562001" class="BrightcoveExperience">   
  <param name="bgcolor" value="#FFFFFF" />   
  <param name="width" value="480" />   
  <param name="height" value="270" />   
  <param name="playerID" value="1925363807001" />   
  <param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreaNI4gqZCnoD2NqdsPzOGP" />   
  <param name="isVid" value="true" />   
  <param name="isUI" value="true" />   
  <param name="dynamicStreaming" value="true" />   
  <param name="@videoPlayer" value="1926945850001" />   
  <param name="includeAPI" value="true" />   
  <param name="templateLoadHandler" value="myTemplateLoaded" />   
  <param name="templateReadyHandler" value="onTemplateReady" /> 
</object> 
<script type="text/javascript">brightcove.createExperiences();</script>

Code Notes:

• The code above loads a video in the player, plays it,, then retrieves the next video from the server and plays it.
• In this sample, the player loads videos by ID, passed as the value of the videoID parameter in the player publishing code. For the purpose of simplifying the example, those IDs are hard coded. In order to dynamically load videos to a player by video tags, dates, or metadata fields, use the Media API to return videos that qualify for a given criteria by the video ID or reference ID. Then load the results of your media calls into the player using the Smart Player API. For more on the Media API, see Media API: Getting Started Using JavaScript.

Additional resources

The following references and support articles will help you learn more about the Smart Player API:

• Using the Smart API provides an overview of this API for smart players and details the supported features. 
• The Smart Player API Reference lists the methods and events available for coding solutions supported for players in both Flash and HTML mode. 
• Refactoring Flash-Only Player Code to Smart Player Code for a process of updating your existing Flash-only player solutions to smart player solutions using the Smart Player API.
• Listening for Events using the Smart Player API for a sample of setting event listeners and capturing events.