Organizing the BODY

Set up basic sections in the body.

The basic <body> structure can be organized into the following parts:

1. Presentation layout with named <DIV> elements.

2. The onCreate function, which ensures the player is in a playback-ready state. See Handling Player State with onCreate on page 35 for more information.

3. Asset information retrieved via listeners and method calls. See Information with Listeners and Method Calls on page 35 for more information.

4. The logic required for Playing the Video on page 36.

The snippet below shows the first section, which is the presentation layer defined with <DIV> elements and a getElement() function that accesses them. Those layout elements are referenced later with the Player V3 API (see Information with Listeners and Method Calls on page 35).

. . .

<body>

My Player V3 Content.

// The DIV elements specify the layout for the content elements.

-- Metadata --<br/>

</div>

-- Bitrate (Flash only) --<br/>

</div>

-- Buffer --<br/>

</div>

// This function retrieves the content element corresponding to the specified DIV element ID:

function getElement(id) {

return document.querySelector('#'+id);

} . .

. </script>

</body>

PLAYER DEVELOPER GUIDE | PLAYER JAVASCRIPT API PROGRAMMING | 35

You can manage all actions and customization related to the Player object within the onCreate function.

As shown in the example below, you can use the Player V3 API to add event listeners and error handling within the onCreate() function. This example contains an event listener for handling errors that relies on the Player V3 message bus. For more information, see Handling Errors for an HTML5 Player Using JavaScript on page 61.

. . .

function onCreate(player) {

// Everything you do with the player should be done either in onCreate // or as listeners on the message bus

// to ensure that the player is ready to play videos and assets.

console.log("-- onCreate");

player.subscribe('*','myPage', function(eventName) { console.log("RECEIVED EVENT: "+eventName);

});

// Error handling listener // Subscribe to the error event

player.subscribe("error", "test-plugin", function(eventName, payload) { console.log(eventName+": "+payload);

});

. . .

Information with Listeners and Method Calls

Use event listeners and Player V3 API methods to retrieve the asset's information you want to work with.

The simplistic example here uses getter methods to retrieve the asset's basic information (title, description, and duration) and bitrate- and buffer-related details. There are many other events and methods available.

In addition, the basic structure of an event listener is shown here, using mb.subscribe.

. . .

// Buffer listener

// Need to subscribe to an event if you want updates for the length of the buffer.

// Ideally you'd listen for the BUFFERING event.

window.bufferLength = -100;

player.subscribe('playheadTimeChanged', 'myPage', function(eventName) { var newBufferLength = player.getBufferLength();

if (bufferLength === newBufferLength) { return; }

window.bufferElement.innerHTML += "Buffer length is " + player.getBufferLength() + "<br/>"

window.bufferLength = newBufferLength;

});

// Bitrate listener

// You *must* listen to bitrateInfoAvailable in order to request it.

player.subscribe('bitrateInfoAvailable', 'myPage', function(eventName) { var rates = player.getBitratesAvailable();

if (rates.length > 0) {

for (var i=0; i < rates.length; i++) {

window.bitrateElement.innerHTML += "Rate: " + rates[i] + "<br/>"

} } });

// Metadata

// Content information is available after contentTreeFetched, but it is best to wait until

// playbackReady for duration.

player.subscribe('playbackReady', 'myPage', function(eventName) {

window.metadataElement.innerHTML += "Title is: " + player.getTitle() + "<br/>";

window.metadataElement.innerHTML += "Description is: " + player.getDescription() + "<br/>";

window.metadataElement.innerHTML += "Duration is: " + player.getDuration() + "<br/>";

Make sure everything is ready, specify embedded parameters, and play the video and assets.

Wrap the call to OO.Player.create() within the OO.ready method to ensure the script is initialized and loaded.

When you call OO.Player.create(), you will pass in the following parameters:

• The ID of the DIV element to which to attach the player object.

• The embed code for the video.

• Embedded player parameters. These can be used to customize player ads and behavior, and can determine player styles. For more information, see Embedded Parameters. You can also specify Custom Module Embedded Parameters.

Tip:

Rather than calling the asset object's .play function, set the autoplay parameter to true.

OO.ready(function() { // Surround everything with OO.ready to make sure the script has

// loaded and initialized completely

window.player = OO.Player.create('playerwrapper','w3ZHc0Njr33Tdp-RRcwfZMjaOrmzOP82', {

PLAYER DEVELOPER GUIDE | PLAYER JAVASCRIPT API PROGRAMMING | 37 // add the embedded player parameters here

onCreate: window.onCreate,

autoplay: true // Instead of calling object.play it is easier (and more robust) to set autoplay here

});

</script>

</body>

</html>

Renaming the Default Namespace

Use namespace to place multiple independent copies of a player on a page.

The namespace parameter allows multiple independent copies of player code on the same page, by renaming the default namespace OO to any other valid JavaScript id. For example if you use this embed:

?namespace=MYPLAYER_1></script>

?namespace=MYPLAYER_2></script>

You can later use:

MYPLAYER_1.Player.create(...) MYPLAYER_2.Player.create(...)

In document PLAYER DEVELOPER GUIDE (Page 34-37)