Basic Tutorial for the HTML5 Player V3

Use this tutorial to get started using the HTML5 Player V3.

This tutorial helps you begin working with the Ooyala HTML5 Player V3. You will code an HTML page and add tags containing the logic required to customize, manage, and use the Ooyala player.

The recommended structure for building your HTML page is:
  • A DOCTYPE declaration.
  • A head element containing the code to initialize and load the player.
  • A body element containing <div> tags that define presentation and layout, as well as <script> tags that handle player events and data, customize the player, and manage playback of video and related assets.

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

Step 1: Create a Simple Web Page

Start by creating an empty HTML5 web page. To ensure your page renders properly in all browsers, begin with a <!DOCTYPE html> declaration:
<!DOCTYPE html>
<html>

  <head>
    <title>My Test Player V3 Web Page </title>
  </head>
  
  <body>
      My Player V3 Content.
  </body>
  
</html>
Note: All HTML5 web pages should have the <!DOCTYPE html> declaration to work properly in all browsers. Windows IE9 is particularly strict and may not render the page properly if this declaration is not included.

Step 2: Load Your Ooyala V3 Player

The head tag is the section of the web page where you load and initialize the Ooyala Player, as well as any custom modules you would like to use. The advantage to loading the player within the head tag is that the player loads before the rest of the web page loads, ensuring it is ready to use by the time the user is able to interact with the player or any of the controls you provide. In this section you will include a <script> tag that makes the request for your player.

To get started, you will need a Player ID. The Player ID is an alphanumeric string that uniquely identifies a specific player you will use in your web page. As shown in the following screenshot, you get this Player Id from the Backlot → Manage → Embed tab.

Within the head tag, create a <script> tag with a src attribute that makes the request to load the player. Replace player_id with the Player ID you retrieved from the Backlot → Manage → Embed tab:

<head>

  <!-- Load Ooyala Player -->
  <script src='http://player.ooyala.com/v3/player_id'></script>

</head>
For additional information about the player_id with the REST APIs, see Managing Players Using the Backlot REST API.
Note: You need to load the player only once, even if you plan to create multiple players.

You may also specify any third party or custom modules that you would like to load by including additional <script> tags, each having a src attribute specifying a path to a custom module:

<head>

  <!-- Load Ooyala Player -->
  <script src='http://player.ooyala.com/v3/player_id'></script>

  <!-- Load additional custom modules -->
  <script src='/custom_module_name.js'></script>

</head>

Step 3: Set up the Player Layout in the UI

Now you will begin to work within the body element.

The first thing you will do is specify the presentation layout for the player using a named <div> element. By default, the player's UI will occupy the entire space provided by the container <div> tags, which you must use to create a container for the player. This allows you to control the position of the player on the screen, and enables the player to adapt to dynamic changes in the site layout.

Begin by creating a <div> element that will display the player UI and video screen. The <div> element will need a unique DOM ID, which you specify in its id attribute (playerwrapper in this example). You will use this div id later to reference the loaded player.

<body>

  My Player V3 Content

  <!-- The DIV elements specify the layout for the content elements. -->
  <div id='playerwrapper' style='width:480px;height:360px;'></div>

</body>
 
Note: The HTML standard requires that each div id must be unique.

Step 4: Create and Embed Your Player

Now you can create the player within the body element.

Include a <script> tag below the <div> element where you specified the container for the player. Within this <script> tag, you will create the player, associate a video and related assets with the player, and include any embedded parameters (you will learn more about this later). Initially, you need to manually create your video embed code for the player. In the following example, we create a video player and place it in the <div> container identified by the div id playerwrapper.

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. In this example, the autoplay parameter to true so that the asset (video or audio) plays automatically upon loading. The width and height settings are set to 100% so that, in a responsive design environment, the player automatically resizes to fill the amount of space in the parent container. For more information, see Player V3 Embedded Parameters. You can also specify Player V3 Embedded Parameters for Custom Modules.
      <script>
        // Surround everything with OO.ready to make sure the script has
        // loaded and initialized.        
        OO.ready(function() { 
          window.player = OO.Player.create(
            'playerwrapper',
            'hkbTd2czrIYRs4-HnJ9nVcHSxtA07FUK', {
              // add the embedded player parameters here
              autoplay: true 
              height: 100%
              width: 100%
            }
          );
        });
      </script>
Note: To destroy a player, call the OO.Player.destroy() method. For examples and additional detail, see Advanced JavaScript Examples for Player V3.

Complete Basic Example

You now have a complete working example of a basic web page that loads the Ooyala V3 Player with default settings, renders it according to the layout specified in the <div> container, creates the player, and runs a video:
<!DOCTYPE html>
<html>

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

    <!-- Load Ooyala Player -->
    <script src='http://player.ooyala.com/v3/e18ab1da1813483499554ea2d8e67fbd'></script>

    <!-- Load additional custom modules -->
    <!-- script src='custom_module_name.js'></script> -->
  </head>


  <body>
    My Player V3 Content

    <!-- The DIV elements specify the layout for the content elements. -->
    <div id='playerwrapper' style='width:480px;height:360px;'></div>

    <script>
      // Surround everything with OO.ready to make sure the script has
      // loaded and initialized.        
      OO.ready(function() {
        window.player = OO.Player.create(
          'playerwrapper',
          'hkbTd2czrIYRs4-HnJ9nVcHSxtA07FUK', {
            // add the embedded player parameters here
            autoplay: true
            height: 100%
            width: 100%
          }
        );
      });
    </script>
  </body>
</html>       
     

Was this article helpful?