Dynamically Loading a Player Using JavaScript

When you use the standard Brightcove JavaScript embed code, the player is rendered along with the rest of the page as it loads. If you prefer to load the player after that, perhaps when the user clicks on a button (as in an AJAX interface), you can dynamically create the player using the createExperience() method in the Brightcove JavaScript Player API. Conversely, if you want to remove a player from the page you can do so with the removeExperience() method. This article is meant to describe how to work with these two methods so you can add and remove Brightcove players from the page as necessary.

Click here to see this functionality in action.

Instead of placing the JavaScript player publishing code provided by the Brightcove Publishing module directly in the page where the player is to be rendered, we will be creating this code on the fly. The following code will be responsible for generating an object tag for the player, along with the param tags within that tag that will control all of the attributes of the player we are going to be loading. After that, we will use the createExperience() method to instantiate the new player object and decide where it is to be rendered by providing the id of an HTML element in the page for it to be attached.

Creating the Player

To begin, you'll want to ensure that the page you are working with includes the BrightcoveExperiences.js file. This should be done using a script tag like this:

<script language="JavaScript" type="text/javascript" 
        src="http://admin.brightcove.com/js/BrightcoveExperiences.js">
</script>

This will give you access to the JavaScript methods we will use to create and, if necessary, remove the player. Next you will need to know where you want the player to be rendered. In this example, I will use a div tag with its id set to "placeHolder":

<div id="placeHolder">Place holder for player</div>

To create the player, I'm going to need some type of event that can call a function. For this example, I'm going to use a simple HTML button.

<button onclick="addPlayer()" />Add Player</button>

When clicked, this button will execute the addPlayer() function. This function starts by creating an object named param that will contain the values for the player attributes we need to specify, such as playerID and videoID.

var params = {};
params.playerID = "18731190001";
params.videoId = "1375772128";
params.autoStart = "true";
params.bgcolor = "#993300";
params.width = "316";
params.height = "267";
params.isVid = "true";

It will then create an object tag using the createElement() method and specify that object tag's id as "player1". This value will be used to add and remove the player from the page and needs to be unique if there is more then one player on a page. Using the param object it created previously, the function then creates a param tag inside of the object tag for each parameter in the object.

var player = brightcove.createElement("object");
player.id = playerName;
var parameter;
for (var i in params) {
     parameter = brightcove.createElement("param");
     parameter.name = i;
     parameter.value = params[i];
     player.appendChild(parameter);
}

Next, the function gets a reference to the HTML element that will be used to attach the player. In this example, that element is the div tag on the page with the id of "placeHolder".

var playerContainer = document.getElementById("placeHolder");

Lastly, the function calls createExperience(), providing it:

• the object created for the player,
• the element that it is to be attached to, and
• a Boolean value of true or false.

Passing true as the third parameter to createExperience() denotes that you want the player to be appended as a child of the parent element you specified. Passing false as the third parameter denotes that you want the player to be appended after the element specified, as a sibling.

brightcove.createExperience(player, playerContainer, true);

Removing the Player

Now that you've created a player, it's likely that you'd want to be able to remove that player again. To do that, I'm going to create another simple HTML button. When it is clicked, it will execute the removeExperience() function.

<button onclick="removePlayer()" />Remove Player</button>

The removeExperience() function is very simple and just takes the id of the player's object tag (which was created in the addPlayer() method). This will immediately remove the player from the page.

function removePlayer() {
     brightcove.removeExperience(playerName);
}

Next Steps

The example I've presented is functional but not very robust or reusable. The most obvious improvements on this code would be to permit adding multiple players to the same page and being able to have each player rendered in a different HTML element with its own unique id.

The easiest way to accomplish this would be to alter both addPlayer() and removePlayer() so that they accept a single parameter containing the id of the HTML element which could also be used for the id of the player to ensure it is unique.