Basic Tutorial for Player V4

This tutorial walks you through the steps of adding a video with an Ooyala player onto a web page. It begins by configuring your player and video in Backlot, embedding the player on a web page, playing the video to verify your setup, and then configuring/testing additional Backlot settings.
Note: This tutorial uses the default Ooyala configuration in the pure SAAS (software as a service) model, in which Ooyala hosts and maintains all resources (software paths, plugins, and skin resources) for you. This provides the simplest way to embed and deploy an Ooyala player. Ooyala bundes all the player resources, minifies, and automatically provides bug fixes and updates if this methodology is used.

Before You Begin / Prerequisites

Before you begin this tutorial, you should:
  • Know how to edit HTML code on a web page.
  • Have a Backlot user account.
  • Upload a video into Backlot that you want to use.
  • Have a web page on which you want to add a player to run your video asset.
For background information, see Player V4 and Getting Started with Player V4.

Step 1: Log Into Backlot

Log into Backlot: https://backlot.ooyala.com/

Step 2: Create a New Player

  1. Go to the Player Branding tab (click PUBLISH > Player Branding).
  2. Go to the Player Selection sidebar.
  3. Verify that Player - V4 is the selected player type.
    Note: If you created an account after May 1st 2017, only Player V4 is an option. If for some reason you need access to Player V3, please contact Ooyala Technical Support.
  4. Click the +New button. Backlot adds a new player to the list.
  5. On the Player tab, change the Player Name from New Player to something more descriptive (such as myPlayer).
For general information, see Creating a Player in Backlot.

Step: 3: Assign the Player to a Video Asset

  1. Go to the MANAGE tab.
  2. Select a video in the list.
  3. Go to the Embed sub-tab.
  4. Under Custom Player, click the down arrow and select the player you just created.
    Note:
    • Content ID is the Ooyala-assigned ID for your selected video.
    • Player ID is the Ooyala-assigned ID for the selected player.
  5. Go to the Details subtab and click the play button in the preview window to verify that your video runs correctly.

Step 4: Get the Player Embed Code

  1. Go to the Embed subtab.
  2. Under Generate Embed Code, choose the following embed code type:

    V4 HTML5 Standard Player Embed Code (recommended)

  3. View the embed code by scrolling through the text box below the embed code type.
    Note: In place of YOUR_PLAYER_ID and YOUR_CONTENT_ID below, you will see your Player ID and Content ID, respectively.
       <!-- This embed code automatically includes and packages standard Player V4 plugins. If you need a different mix of plugins, please use the Advanced embed option. To see the included plugins, please refer to this doc: http://help.ooyala.com/video-platform/concepts/pbv4_release_notes.html -->
       <!-- Include plugins necessary for player -->
       <script src="//player.ooyala.com/core/YOUR_PLAYER_ID"></script>
       
       <div id='container' ></div>
       
       <script>
         var playerParam = {
           'autoplay':false,
           'loop':false
         };
         OO.ready(function() {window.pp = OO.Player.create('container', 'YOUR_CONTENT_ID', playerParam);});
       </script>
  4. Click Copy to copy the embed code to your clipboard.
For general information, see Configuring Player Embed Settings in Backlot.

Step 5: Embed the Player on the Web Page

  1. Open the HTML page on which you want to add the video.
  2. If you do not have an existing page, create a blank one using something like the following code:
      <!DOCTYPE html>
      <html>              
        <head>
          <title>My Test Player V4 Web Page</title>
        </head>
        <body>
          
         </body>
      </html>            
  3. Paste the copied embed code onto the page between the <body>...</body> tags. Example:
      <!DOCTYPE html>
      <html>              
        <head>
          <title>My Test Player V4 Web Page</title>
        </head>
        <body>
           <!-- This embed code automatically includes and packages standard Player V4 plugins. If you need a different mix of plugins, please use the Advanced embed option. To see the included plugins, please refer to this doc: http://help.ooyala.com/video-platform/concepts/pbv4_release_notes.html -->
           <!-- Include plugins necessary for player -->
           <script src="//player.ooyala.com/core/YOUR_PLAYER_ID"></script>
           
           <div id='container' ></div>
           
           <script>
             var playerParam = {
               'autoplay':false,
               'loop':false
             };
             OO.ready(function() {window.pp = OO.Player.create('container', 'YOUR_CONTENT_ID', playerParam);});
           </script>
        </body>
      </html>
  4. Save your changes to the page.
For general information, see Embedding Player V4 on a Web Page.

Step 5: Test Playback

  1. Load the page in a browser.
  2. Click the video to run it.
Your video should play in the page. If it does not, please check our Player V4 FAQ.

Step 6: Configure and Test Other Settings in Backlot

  1. In Backlot, go to PUBLISH > Player Branding > Player.
  2. On the Player tab, enable (check) the Bitrates option to display the current bitrates during playback.
  3. On the Player tab, enable (check) the Always show scrubber bar option so that the scrubber bar is always displayed (does not automatically hide).
  4. Load the page in a browser.
  5. Click the video to run it.
  6. During playback, verify that you can now see the bitrates control.
  7. Review the other configurations to determine what player UI controls are ideal for your website.
Note: Because the player settings are distributed through our CDN, you will not immediately see the changes applied to the embedded player. It may take up to one (1) hour to apply to all geographies.

For general information, see Configuring a Player in Backlot. If you need more controls over your Player’s user interface than what you see in the Backlot settings, see other options at Customizing the Player V4 Appearance.

Step 7: Configure and Test What Happens When Playback Ends (Optional)

You can configure what happens when playback ends with a video. Depending on how your Ooyala account is configured, you can configure either Discovery or End Screen settings.

To determine which option you should use:

  1. In Backlot, go to PUBLISH > Player Branding.
  2. Look at the subtab that is the furthest to the right.
    • Discovery means that discovery is enabled for your account.
    • End Screen means that discovery is not enabled for your account.
  3. Complete the instructions (below) that apply for your account.

Step 7.1 - Configure End Screen Settings (Optional)

  1. Go to PUBLISH > Player Branding > End Screen.
  2. On the End Screen tab, enable Title and Description.
  3. Go to MANAGE > Details and confirm or specify the video Title and Description.
  4. When playback ends, verify that you can see the video title and description.
Important: If you use any test on the screens (Title/Descriptions), then the player will blur the video image on a player “pause” event. This is to make sure the text is readable. If you do not want to have the player blur the video image on pause, turn off the Title and Description elements.
For general information, see Configuring a Player in Backlot.

Step 7.2: Configure Discovery Settings (Optional)

If Discovery is enabled for your account, you can configure player settings on the Discovery tab.
  1. Go to PUBLISH > Player Branding > Discovery.
  2. Select your player from the Player Selection list if it’s not already selected.
  3. On the Discovery tab, select Turn On Discovery For This Player.
  4. Load the page in a browser.
  5. Click the video to run it.
  6. When playback ends, verify that you can see video recommendations.
For general information, see Discovering Content in Player V4.

Step 8: View Activity in Ooyala IQ Analytics

  1. Go to ANALYZE > Dashboard.
  2. Look for statistics indicating that your video was played (see Trending Past Hour, Popular Now, and Top 10 Countries).
For general information, see Ooyala IQ Analytics User Guide.

Was this article helpful?