Embedded Parameters for Player V4

You can pass embedded parameters to the OO.Player.create() method. These parameters include CSS style settings such as width and height, and other parameters such as tags from your ad server or ad network account used for advanced ad tracking and targeting.

Required Parameters
Note: To specify ad embedded parameters for Google IMA, VAST, and FreeWheel, see Configuring Ad Parameters.

As you can see in the example below, you will add embedded parameters at the page level when you create a player.

<!DOCTYPE html>
<html>
    <head>
        <title>My Test Player V4 Web Page</title>
        <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
        <script src="url_where_hosted/core.min.js"></script>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
        <!-- Change these html5-skin.min.css and html5-skin.js to your local build if necessary -->
        <script src="url_where_hosted/html5-skin.min.js"></script>
        <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              }

             // Add Optional Embedded Parameters Here

            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>
    </body>
</html>

Required Parameters

The following are required embedded parameters, represented as key value pairs, that you must use when creating a V4 player.

pcode

The pcode is your account identifier. This is an alphanumeric string that precedes the period in your API key. You can get your pcode from your API keys. If you do not include your pcode, the player will not load.

Example:

<div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>

playerBrandingId

The player branding ID is a reference to your player. You can get your player branding ID (referred to as the Player ID in Backlot) by going to the MANAGE tab > Embed subtab in Backlot. If you do not include your player branding ID, the player will not load.

Example:

<div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>

skin.config

The skin parameter (always required if you want to use the Ooyala default player skin) references the skin.json config file. This loads the player skin.

Example:

<div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>

Optional Parameters

The following are optional embedded parameters, represented as key value pairs, that you may use with the OO.Player.create() method.

autoplay

Enables the automatic playing of an asset (video or audio) upon loading. This is useful for UIs that do not have play/pause controls or conditions where you want the content to play immediately.

Type: boolean

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        autoplay: true,
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        }
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

encodingPriority

Use this parameter to define the video encoding priority. The highest priority encoding that is available and can be decoded by the player will be selected. Any encoding that you do not specify will be appended to the end of the array in pseudo-random order.

Note: Use akamai_hd2_hds for Live streams and akamai_hd2_hds for VOD content.
The following are best practices for setting encoding priority and using video streams:
  • The default encoding priority is DASH_DRM > HLS_DRM > HLS > DASH > MP4 > HDS >WEBM. We strongly recommend that you use the default encoding unless you have other streaming needs.
  • With DASH, you should always prioritize an alternate stream (do not set the encoding priority to only DASH).
  • For DASH video, you must use the AAC or mp4a.40.2 audio codecs.

Type: string

Valid Values: hls, dash, mp4, hds, webm, ima, akamai_hd2_hds, akamai_hd2_vod_hds

Default: ["dash_drm", "hls_drm", "hls", "dash", "mp4", "hds", "webm"]

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "encodingPriority": ["hls", "dash", "mp4", "hds", "webm"],
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        }
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

initialBitrate

Use this parameter to set the initial minimum bitrate level (immediately after video playback) and to sustain that level for a specific period of time. Once the duration is reached, the bitrate level changes to the video plugin's automatic bitrate level.

Settings:

You can specify two child parameters:
Name Type Valid Values Description
level string One of the following:
  • "auto" (default)
  • number between 0 (zero) and 1, inclusive
  • Specify "auto" to defer to the default bitrate set by the video plug-in's ABR logic. The behavior is equivalent to omitting initialBitrate entirely.
  • Specify a number if you want to set a specific level between zero and 1, inclusive.
If you specify a number:
  • Specify 0 (zero) to select the lowest bitrate first for the associated video plugin
  • Specify 1 to select the highest bitrate (MAX_BITRATE) for the associated video plug-in.
  • Specify a fraction between 0 and 1 to specify a percentage between the lowest and highest bitrate for the associated video plugin. For example, if you have a bitrate of 1MB, then setting it to 0.8 means that the player will stream at 800KB.
To determine the level, consider such factors as the approximate network speed of end user, type of device (desktop or mobile), and so on.
duration number a number greater than zero Represents the number of seconds to sustain the initial bitrate level.
Note: The following APIs also override the initialBitRate and automatic bitrate, starting from when they are called and for the remainder of the playback session:
  • SET_TARGET_BITRATE
  • setTargetBitrate()

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
   var playerParam = {
      "pcode": "YOUR_PCODE",
      "playerBrandingId": "YOUR_PLAYER_ID",
      "skin": {
         // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
         },
         // Set the initial bitrate to 80% of the maximum bitrate for 30 seconds
         initialBitrate {"level": 0.8, "duration": 30}
      };
      OO.ready(function() {
         window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
         });
</script>         

initialTime

Use this parameter to set an initial time in seconds to start playing content at a specific point. This parameter can be used to enable seeking for iOS-based devices.

Type: integer

Valid Values: time in seconds

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        },
        initialTime: 10
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

initialVolume

Use this parameter to set an initial volume for a video.

Type: number

Valid Values: 0-1

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        },
        initialVolume: 1.0
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

loop

Use this parameter to enable continuous play. With loop set to true, once the playback has started it continues until the user stops playback or closes the browser. Also the behavior is the same when the ASSET_ID is set using setEmbedCode. As soon as the ASSET_ID is set, if autoplay is true, the playback starts immediately regardless of the previous state of the player (video playing/paused/stopped). If autoplay and loop parameters are not passed in through setEmbedCode, the existing values are used (which may have been set via a previous call to setEmbedCode).

Type: boolean

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        },
        loop: true
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

onCreate

Use this parameter to listen to an event message and perform an action. This parameter enables you to subscribe to event messages from the message bus before the player is fully created. It allows you to modify the player prior to its complete creation.

When called, onCreate: function(player):

  • Checks for any additional modules (custom, 3rd party or other type).

  • Enables these additional modules to connect to the message bus.

  • Sends a message to the message bus signaling each module to start up.

You must call onCreate before anything can happen; otherwise, the existing and additional or third-party modules are not connected to the message bus and are not initialized.

Example

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        },
       "onCreate": function(player) {
        player.mb.subscribe("*", "myPage", function(eventName) {});
        }
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

onCreate and the Player Callback

To handle events in Player V4, you provide an onCreate function to the OO.Player.create() call, and then register for all the messages.

preload

Use this parameter to specify if you want to preload the video.
Note: The player will never preload on Chrome or devices. We are working on a plugin that will allow preload behavior on devices for a future release.

Type: boolean

Example:

<div id="container" style="width:640px; height:360px;"></div>
<script>
    var playerParam = {
        "pcode": "YOUR_PCODE",
        "playerBrandingId": "YOUR_PLAYER_ID",
        "skin": {
            // Config contains the configuration setting for player skin. Change to your local config when necessary.
            "config": "url_where_hosted/skin.json"
        },
        preload: true
    };
    OO.ready(function() {
        window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
    });
</script>

skin.inline

Use this parameter to specify inline skin modifications. skin.inline will overwrite any settings in the skin.json config file. The JSON object within inline must have the same structure as skin.json (all parent objects going all the way back to the root object). For example, if you want to overwrite the start screen play button color using inline, you need to include the start screen object, playIconStyle object, and color (as shown in the following example).

Example:

<div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                  "config": "url_where_hosted/skin.json",
                  "inline": {
                      // Put your player customizations here
                      // to override settings in skin.json. 
                      // The JSON object must match the structure of skin.json.
                      "startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
                  }
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>

Was this article helpful?