Advanced Layout: Embedding Multiple Players (HTML5 Player V3)

Learn to use advanced layout techniques to embed and present multiple players.

Suppose you would like to display multiple players on your web page. You will learn how to use namespaces to load, initialize, and create each player instance, and use <div> tags to specify how they will appear on the screen.

See Complete Example to view the code for the entire web page.

Step 1: Load Multiple Player V3 Instances

To load and initialize multiple players, create a <script> tag for each within the head element for your page. As you learned in Basic Tutorial for the HTML5 Player V3, each <script> tag must specify a src attribute that makes the request to load the player.
Since you are using multiple players, you will need a way to be able to refer to each one. To do this, you will use a namespace parameter, which allows you to create and use namespaces other than the default OO.Player namespace. For example, if you specify a Player2 namespace when loading the second player, you can create that player by calling Player2.Player.create(). Here is the portion of the web page code that loads and initializes four player instances using namespaces:
  <head>
    <title>My Test Player V3 Web Page </title>

    <!-- Load 4 Ooyala Player Instances -->
    <!-- The namespace parameter enables you to reference 
            each of these in the create() method calls below. -->
    
    <!-- This first instance uses the default OO namespace.
         To use this instance, call OO.Player.create(). -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?platform=html5-priority"></script>

    <!-- This instance creates a Player2 namespace.
         To use this instance call Player2.Player.create(). -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?namespace=Player2"></script>

    <!-- Similarly, these instances create Player3 and Player4 namespaces. -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?platform=html5-priority&namespace=Player3"></script>
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?namespace=Player4"></script>
                    
  </head>
                

The namespace parameter is one of several query parameters you can specify when loading a player. In the example here, we also make use of the namespace parameter to set HTML5 as the preferred playback mechanism for those players. For more information, see Player V3 Query String Parameters.

Step 2: Set up the Layout in the UI

Now you will work within the body element to set up the layout and presentation of the four players. As you learned in Basic Tutorial for the HTML5 Player V3, you can specify the presentation layout for the players using named <div> elements. In this case, the four players will be displayed by presenting two on the left and two on the right:
  <body>
    My Player V3 Content

    <!-- The DIV elements specify the layout for the content elements. -->
    <!-- In this example, 4 player instances are presented on the screen. -->
    <div style="overflow:hidden;">
        <div id="ooyalaplayer1" style="width:250px;height:180px;float:left"></div>
        <div id="ooyalaplayer2" style="width:250px;height:180px;float:right"></div>
    </div>
    <div style="overflow:hidden;">
        <div id="ooyalaplayer3" style="width:250px;height:180px;float:left"></div>
        <div id="ooyalaplayer4" style="width:250px;height:180px;float:right"></div>
    </div>
  </body>

Each of the players is assigned a div id that will be referenced in the calls to the Player.create() method, as shown in the next step.

Step 3: Create the Players

At this point you can include a <script> tag within the body element containing the code to create the four player instances and associate them with the layout you specified above. As you learned in Basic Tutorial for the HTML5 Player V3, it is a best practice to wrap the calls to the Player.create() method within the OO.ready() method to ensure the script is initialized and loaded.
You specified four player instances within the head element for your page:
  • The first instance was specified without a namespace parameter, so it uses the default namespace of OO. In this case we will call the OO.Player.create() method and associate the player with the div id of ooyalaplayer1.
  • The remaining instances were specified with namespace values of Player2, Player3, and Player4. In those cases we will call Player2.Player.create(), Player3.Player.create(), and Player4.Player.create(), associating each with the remaining div ids (ooyalaplayer2, ooyalaplayer3, and ooyalaplayer4):
    <script>
      // Surround everything with OO.ready to make sure the script has
      // loaded and initialized completely
      OO.ready(function() { 

        // Create instances of each of the players using the 
        // DIV element ids (ooyalaplayer1, ooyalaplayer2, etc).

        // This first create() call uses the default OO.Player namespace.
	    OO.Player.create('ooyalaplayer1','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});

	    // These create() calls use the namespaces declared above in the HEAD section.
	    Player2.Player.create('ooyalaplayer2','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
 	    Player3.Player.create('ooyalaplayer3','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
	    Player4.Player.create('ooyalaplayer4','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
      });
    </script>

Complete Example

You now have a complete working example of a web page that loads multiple Ooyala V3 Players, renders them according to the layout specified in the <div> elements and their CSS attributes, and creates the players:
 
<!DOCTYPE html>
<html>

  <head>
    <title>My Test Player V3 Web Page </title>

    <!-- Load 4 Ooyala Player Instances -->
    <!-- The namespace parameter enables you to reference each of these in the create method calls below. -->
    
    <!-- This first instance uses the default OO namespace.
         To use this instance, call OO.Player.create() as shown below. -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?platform=html5-priority"></script>

    <!-- This instance creates a Player2 namespace.
         To use this instance call Player2.Player.create() as shown below. -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?namespace=Player2"></script>

    <!-- Similarly, these instances create Player3 and Player4 namespaces. -->
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?platform=html5-priority&amp;namespace=Player3"></script>
	<script src="//player.ooyala.com/v3/953a32aa99ec4023a9875dfba256637b?namespace=Player4"></script>

  </head>


  <body>
    My Player V3 Content

    <!-- The DIV elements specify the layout for the content elements. -->
    <!-- In this example, 4 player instances are presented on the screen. -->
	<div style="overflow:hidden;">
        <div id="ooyalaplayer1" style="width:250px;height:180px;float:left"></div>
        <div id="ooyalaplayer2" style="width:250px;height:180px;float:right"></div>
    </div>
    <div style="overflow:hidden;">
        <div id="ooyalaplayer3" style="width:250px;height:180px;float:left"></div>
        <div id="ooyalaplayer4" style="width:250px;height:180px;float:right"></div>
    </div>

    <script>
      OO.ready(function() { // Surround everything with OO.ready to make sure the script has
                            // loaded and initialized completely

        // Create instances of each of the players using the DIV element ids (ooyalaplayer1, ooyalaplayer2, etc).

        // This first create() call uses the default OO namespace.
	 OO.Player.create('ooyalaplayer1','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});

	 // These create() calls use the namespaces declared above in the HEAD section.
	 Player2.Player.create('ooyalaplayer2','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
	 Player3.Player.create('ooyalaplayer3','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
	 Player4.Player.create('ooyalaplayer4','k2bnMxcjokUZuXIE5CZFYiHYS752a_BN',{});
      });
    </script>
  </body>
</html>       

Was this article helpful?