Examples of Player V4 Web Page Embedding

This topic provides examples of how you embed Player V4 on a web page. Embedding involves decisions on which plugins you want to load, along with the degree to which you want to customize the skin and CSS.
Note: Wherever you see url_where_hosted in sample code, replace this (in your code) with the URL that points to where the resource is hosted. For a list of Ooyala-hosted paths, see Ooyala-hosted Player V4 Resources. The URL can point to a location on the same host (internal link) or on a separate host (prefixed with http:// or https://). If you host resources yourself (see Hosting Player V4 Resources), be sure to check for any path dependencies within the files.

Embed a Player with a Pre-Loaded Video

To create a player with a pre-loaded video, add the content ID for the video. You can get the content ID from your Backlot account. For more information, see Publishing a Video.
<!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>
        <!-- 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"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
    </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"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>
    </body>
</html>

Embed a Player with Discovery Functionality

Note: You must have Discovery enabled in Backlot for Discovery recommendations to appear. The player associated with the playerBrandingId must also have Discovery enabled in Backlot. For details, see Discovering Content in Player V4.
In Player V4, you must load the Discovery module (<script src="url_where_hosted/other-plugin/discovery_api.min.js"></script>) before you load your player. If Discovery is not enabled in Backlot, the Discovery icon will not appear in the control bar or more options menu. Any Discovery settings you make in Backlot will be overwritten by the settings specified in skin.json. Discovery functionality requires the playerBrandingId you specify on the page.
<!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>
        <!-- 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"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
        <!-- Discovery Module -->
        <script src="url_where_hosted/other-plugin/discovery_api.min.js"></script>
    </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"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>
    </body>
</html>

Embed a Player with Ad Functionality

To create a player that integrates with an ad manager, load the ad manager module before you load the player. To create a player with FreeWheel ads, load the FreeWheel module before you load the player. To use more than one ad plugin on a page, see Integrating Multiple Ad Managers.
<!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>
        <!-- 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"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
        <!-- FreeWheel Module-->
        <script src="url_where_hosted/freewheel.min.js"></script>
    </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"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>
    </body>
</html>

Embed a Simple Player with Inline Player Skin Modifications

The following example shows how to use the inline parameter to make inline player 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).
<!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>
        <!-- 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"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
    </head>
    <body>
        <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>
    </body>
</html>

Embed a Player With Optional Embedded Parameters

For a more advanced use of the Player embed style, you can create a player with optional embedded parameters. Add parameters within the playerParam variable. See Embedded Parameters for Player V4 for a full list of embedded parameters.
<!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>

Embed a Player With External Identifiers

For a more advanced use of the Player embed style, you can create a player using external identifiers. The following example creates a player using an external Id.
 <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", "extId:<name:numeric_id>", "YOUR_ASSET_ID", playerParam);
            });
</script> 

Was this article helpful?