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 Video

To create a player with a 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>
        <script src="//player.ooyala.com/core/YOUR_PLAYER_ID"></script>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID");
            });
        </script>
    </body>
</html>
This uses the Backlot configuration of the player associated with YOUR_ASSET_ID. It includes the following plugins:
  • skin-plugin/
    • html5-skin.min.css
    • html5-skin.min.js
  • video-plugin/
    • main_html5.min.js
    • bit_wrapper.min.js
  • ad-plugin/
    • pulse.min.js
    • google_ima.min.js
    • freewheel.min.js
    • ad_manager_vast.min.js
  • other-plugin/
    • discovery_api.min.js

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>
        <script src="//player.ooyala.com/core/YOUR_PLAYER_ID"></script>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "skin": {
                  "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 Page-level Parameters for Player V4 for a full list of embedded parameters.
<!DOCTYPE html>
<html>
    <head>
        <title>My Test Player V4 Web Page</title>
        <script src="//player.ooyala.com/core/YOUR_PLAYER_ID"></script>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
             // 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 = {
              "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?