Comparing Embed Code Styles in Player V3 and Player V2

Before migrating from prior player versions, it will help to understand the difference between the embed code models.

Elements of the Embed Code

Before starting, it might help to review the elements of an embed code that you get from Backlot. Typically, your embed code is a URL that looks something like the following:

<script src="http://player.ooyala.com/v3/<player_branding_id>"</script>  
<div id='playerContainer'></div>  
The embed code is constructed of the following segments:
This segment... Contains...
protocol and domain http://player.ooyala.com/v3/ You can use either http or https protocols. To use the player, you need to specify the /v3/ directory. You must add a valid player branding id after the protocol and domain. You need to do this as there is no single player; it is compiled specifically for the player id that you provide.
player branding id This segment enables you to identify a specific named and styled player. When you specify a new player in Backlot and assign it some attributes, the named player is comprised of the player branding id and any additional assigned attributes. For more information see Creating a Player and Creating a Player Using the REST API.
div id The div id enables you to specify a unique id for the div tag. You can use this id to reference the player container in CSS or JavaScript files. Your id must be unique so that the reference to the div is correct.

Construct an Embed Code

You can cut and paste your embed code from Backlot. For information about how to do this, see Embedding an Asset. If you are not be able to cut-and-paste your embed snippet into your web page, can construct the embed snippet manually. To do this:
  • Start by providing the protocol and domain:

http://player.ooyala.com/v3/
  • Get the player-branding-id from Backlot. For example:

<script src='http://player.ooyala.com/v3/<'replace_with_player_branding_id'>'></script>
Before you begin migrating from prior player versions, it will help to understand the difference between the embed code models. The following examples show the difference between legacy player embed code and the current Player embed code.

Simple Legacy Player Embed Code

With legacy Ooyala players, you referenced the player by providing a playerId parameter to the player. For example, you might specify 'myPlayer' for the playerId. You then reference the player using the DOM element lookup $('#myPlayer'). In these legacy players you reference the player object (player.js) and specify some customization attributes such as width and height using Ooyala query string parameters. In the following example this is followed by the actual embed code string that you obtain from Backlot or create manually.

<script src="http://player.ooyala.com/player.js?width=<width>&height=<height>
&embedCode=replace_with_embed_code></script>  

Simple Player Embed Code

In contrast with prior legacy players, the current Ooyala Player enables you to reference the player object directly. To reference the current Ooyala Player equivalent of the legacy player.js, you just call the object returned from the OO.Player.create(). This object can be safely stored anywhere for future use. The following example illustrates the way that you create of a simple Ooyala Player.
Note: To work, the URL "http://player.ooyala.com/v3/..." always requires a valid player branding id.
<script src="http://player.ooyala.com/v3/<player_branding_id>"></script>  
<div id='playerContainer'></div>  
<script>
var myPlayer = OO.Player.create('playerContainer', 'replace_with_embed_code', {
  width: <width>, height: <height>
});
</script>  

Was this article helpful?