Hosting Player V4 Resources

Ooyala hosts default Player V4 resources that are updated automatically. You have the option to host Player V4 resources yourself, including plugins, your HTML skin configuration file, images, and other resources. Advantages to hosting the plugins and files yourself include:
  • You can optimize fast downloads for your personal routes.
  • You can optimize even more by downloading these files and then concatenating all of your plugins and core into a single file which allows everything to download at once. This is faster and more reliable.
  • If you are making any player look and feel customizations you will need to host skin configuration files anyway, so it will not be much more effort to host more files at the same endpoint.
Note: All hosted resources must be available and accessible to Player V4 users.

Plugin Versions

Note: Plugins must all be from the same Player V4 version. Mixing versions is not recommended.

Player V4 Resources to Host

At a minimum, you must load the Core Player and at least one video plugin for Player V4 to function properly. If you do not load at least one video plugin, your player will not play videos.

If you are using the Ooyala player skin, you must also load the skin plugin (html5-skin.min.js), skin CSS (html5-skin.min.css), image resources (html5-skin/assets/images) and font resources (html5-skin/assets/fonts). You can use the default Ooyala image and font resources or load your own fonts and images.

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.
Resource Name of File to Host
Core Player url_where_hosted/core.min.js
Skin Resources  
HTML5 Skin url_where_hosted/skin-plugin/html5-skin.min.js
Skin CSS url_where_hosted/skin-plugin/html5-skin.min.css
Skin Config File url_where_hosted/skin-plugin/skin.json
Note: skin.json is no longer required for the Ooyala Player skin to be used. Do not specify skin.json if you want to use the Player skins in Backlot. If skin.json is included at the page level, it will overwrite all Backlot player settings in the Publish tab. See Order of Precedence in Player V4 Settings.
Skin iFrame url_where_hosted/skin-plugin/iframe.html
Localization Files
  • url_where_hosted/skin-plugin/en.json
  • url_where_hosted/skin-plugin/es.json
  • url_where_hosted/skin-plugin/zh.json
Images and Fonts
  • url_where_hosted/skin-plugin/assets/images/ooyala-watermark.png
  • url_where_hosted/skin-plugin/assets/images/ooyala.png
Video Recommendation (Discovery) plugin url_where_hosted/other-plugin/discovery_api.min.js
Video Plugins
Note: When you embed a player on a web page, the order of the video plugins represents the order of priority for the plugin usage. For HTML5 video, we recommend putting the bit_wrapper.js first, followed by main_html5.js.
Bitmovin Video Plugin for DASH and HLS Player V4 Version 4.11.13 or higher
  • url_where_hosted/video-plugin/bit_wrapper.min.js
  • url_where_hosted/video-plugin/bitmovinplayer-controls.min.css
  • url_where_hosted/video-plugin/bitmovinplayer-controls.min.js
  • url_where_hosted/video-plugin/bitmovinplayer-core.min.css
  • url_where_hosted/video-plugin/bitmovinplayer-core.min.js
  • url_where_hosted/video-plugin/bitmovinplayer-vr.min.js
  • url_where_hosted/video-plugin/bitmovinplayer.min.js
  • url_where_hosted/video-plugin/bitmovinplayer.swf
Player V4 Version 4.10.6 or earlier (required for mixed content conditions)
  • https://player.ooyala.com/static/v4/stable/latest//video-plugin/bit_wrapper.min.js
  • https://player.ooyala.com/static/v4/stable/latest//video-plugin/bitdashplayer.min.js
  • https://player.ooyala.com/static/v4/stable/latest//video-plugin/bitdashplayer.swf
Main Video Plugin for HLS and MP4 url_where_hosted/video-plugin/main_html5.min.js
OSMF Flash Video Plugin for HDS (Deprecated) url_where_hosted/video-plugin/osmf_flash.min.js
Note: The OSMF Flash Video Plugin for HDS for Player V4 has been deprecated and is scheduled to be disabled. For details and alternatives, see the OVP Release Notes.
Note: If you host this plugin, you must also host the following file in the same location as the osmf_flash.min.js file: http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/osmf_flash.swf

Important: Do not change the name of the osmf_flash.js file. If you bundle multiple video plugins into a single file, and if osmf_flash.js is one of the plugins in the bundle, then the file name (for the bundled file) must be osmf_flash.js.

Akamai HD Video Plugin for Akamai Packaged HDS (Deprecated) url_where_hosted/video-plugin/akamaiHD_flash.min.js
Note: The Akamai HD Video Plugin for Akamai Packaged HDS for Player V4 has been deprecated and is scheduled to be disabled. For details and alternatives, see the OVP Release Notes.
Ooyala Player Plugin for YouTube iFrame url_where_hosted/video-plugin/youtube.min.js
Ad Plugins  
Ooyala Pulse Ad Plugin url_where_hosted/ad-plugin/pulse.min.js
Ooyala SSAI Pulse Plugin for Live Ad Insertion url_where_hosted/ad-plugin/ssai_pulse.min.js
Google IMA Plugin url_where_hosted/ad-plugin/google_ima.min.js
FreeWheel Plugin url_where_hosted/ad-plugin/freewheel.min.js
VAST and VPAID Plugin url_where_hosted/ad-plugin/ad_manager_vast.min.js
Analytics Plugins  
Adobe Analytics (Omniture) Plugin
  • url_where_hosted/analytics-plugin/VideoHeartbeat.min.js
  • url_where_hosted/analytics-plugin/AppMeasurement.js
  • url_where_hosted/analytics-plugin/VisitorAPI.js
  • url_where_hosted/analytics-plugin/omniture.min.js
comScore Plugin Contact your Ooyala account manager for access to this plugin. comScore created and maintains this plugin.
Conviva Analytics plugin
  • url_where_hosted/analytics-plugin/conviva-core-sdk.min.js
  • url_where_hosted/analytics-plugin/conviva.min.js
Google Analytics plugin url_where_hosted/analytics-plugin/googleAnalytics.min.js
Nielsen Analytics plugin url_where_hosted/analytics-plugin/Nielsen.min.js
YOUBORA Analytics Plugin //smartplugin.youbora.com/v5/javascript/ooyalav4/stable/sp.min.js
Note: Unlike other Player V4 plugins, it is not recommended that you try to host this plugin yourself.
Other Feature Plugins  
Playlists plugin url_where_hosted/other-plugin/playlists.js

Updating to the Latest Player Version

To update an Ooyala Player version from a previous version:
  1. Download and host all of the new player resources (core plugin, skin plugins, CSS, font, and image resources, video plugins, ad plugins, analytics plugins, and so on) and update your resources to point to these new files.
  2. If you've customized your own Player skin using your own version of skin.json, download the latest skin.json file and merge any changes in this file with your customized skin.json file.

Tips for Hosting Player V4 Resources

Hosting Player V4 resources involves the following steps:
  1. Copy the resources you need from the default Ooyala location described in Player V4 Resources to Host.
    Note: If you are building plugins or other resources from within your own development environment (instead of pulling them from http://player.ooyala.com/static/v4/stable/latest_player_version/*), refer to the applicable README.md file (for example, README.md).
  2. Optionally, change any of the file(s) that you want to customize.
  3. Upload each file to the server that will host the resource.
When hosting:
  • You can use whatever file path / hierarchy you want. However, the location must be accessible to all player users.
  • In addition to the required plug-ins (see Player V4 Plugins), be sure to include all the plugins you use for your players.
  • You must meet cross-domain requirements, which are in Cross-domain Hosting Considerations below.
  • You must handle any other requirements. For example, for the OSMF Flash Plugin for HDS and Bitmovin Plugin for DASH and HLS, you need to modify the Flash cross-domain policy file (see Loading Video Plugins).

Cross-domain Hosting Considerations

  • If your Player V4 configuration involves resources that are hosted across multiple domains, certain resources (including JavaScript modules, skin-config settings file, language files, images) must have the appropriate CORS headers configured (see Cross-Origin Resource Sharing (CORS)). You do not need to add CORS headers if all Player V4 resources are hosted under a single domain, such as your own domain or Ooyala.
  • To host any of the default Player V4 resources, simply download the latest version from the fixed Ooyala URL and then upload it to your server location.
  • If you plan to make changes to the html5-skin repository, you'll need to set up a local build environment according to the instructions in the Developer Setup section of README.md.
  • If you are using the Bitmovin plugin (bit_wrapper.min.js),OSMF Flash plugin (osmf_flash.min.js, Deprecated), or Akamai HD plugin (akamaiHD_flash.min.js, Deprecated), you need to configure cross-domain compatibility. In your Flash cross-domain policy file, be sure to grant access to both http:// and https:// URLs. For more information, see Adobe's Cross-domain Policy documentation.

Combining Player V4 Plugin Files

If you host plugins yourself, you can combine all of the plugins you use into a single .js file to optimize performance. It is simply faster to load one .js file than multiple .js files. At a minimum, you must include the core player plugin, at least one video plugin, and any other plugins that you reference when you embed Player V4 onto a web page.
Note: If you include the osmf_flash.js file, then the combined file must be named osmf_flash.js.

Ways to Combine Plugins

There are two ways to create the combined file:
  • In a text editor, create a master plugin file (with a .js extension), then copy the master file.
  • If you build your .js files locally, then change your build process so that it generates a single output file that aggregates the JavaScript code from all of the plugins that you use. Next, copy the .js file to the hosting server. Finally, on each web page where you have embedded Player V4 code, be sure to reference just the single .js file.

Example With Multiple Plug-ins

The following example shows the <head> section from a web page that references the individual plugins:
<head>
   <title>My Test Player V4 Web Page</title>
   <script src="url_where_hosted/core.min.js"></script>
   <script src="url_where_hosted/main_html5.min.js"></script>
   <script src="url_where_hosted/discovery_api.min.js"></script>
   <script src="url_where_hosted/html5-skin.min.js"></script>
   <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
</head>            

Example with a Combined Plugin

The following example references a combined plugin (named my_master_plugin.js), which includes core.min.js, main_html5.min.js, discovery_api.min.js, and html5-skin.min.js:
<head>
   <title>My Test Player V4 Web Page</title> 
   <script src="url_where_hosted/my_master_plugin.js"></script>
   <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
</head>            

Best Practices for Self-hosting and Directory Structure

This section describes an example of a self-hosting project structure that you can use for self-hosting JavaScript code. Note that not everything is required - it focuses on how to set up the necessary and most important files.
Refer to the following HTML page. It is assumed that the HTML page is located at the root of the project folder.
<!DOCTYPE html>
<html>
    <head>
       <script src="core.min.js"></script>
        <script src="video-plugin/main_html5.min.js"></script>
        <script src="video-plugin/bit_wrapper.min.js"></script>
        <script src="skin-plugin/html5-skin.min.js"></script>
        <link rel="stylesheet" href="skin-plugin/html5-skin.min.css"/>
    </head>
                
    <body>
        <div id='container'></div>
        <script>
          var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER",
              "skin": {
                        "config": "skin-plugin/skin.json"
                       }
               };
               OO.ready(function() {
               window.pp = OO.Player.create('container', 'YOUR_CONTENT_ID', playerParam);
           });
      </script>
   </body>
</html>          
This shows the files necessary to self-host your player. We assume that everything is located on the same project folder.
  • core.min.js
  • main_html5.min.js
  • html5-skin.min.js
  • skin.min.css
  • skin.json
  • Other resources needed to build self-hosting page:
    • en.json: English translation text for UI. You will also need to modify skin.json > localization > availableLanguageFile > languageFile to use skin-plugin/en.json
    • assets/ folder that contains fonts and static image resources for skin
    • If you are using bit_wrapper.min.js video plugin:
      • bitdashplayer.min.js
      • bitdashplayer.min.css
      • bitdashplayer.swf
File Source
core.min.js //player.ooyala.com/static/v4/stable/RELEASE_VERSION/core.min.js
main_html5.min.js //player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/main_html5.min.js
bit_wrapper.min.js //player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bit_wrapper.min.js
bitdashplayer.min.js //player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.min.js
bitdashplayer.min.css //player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.min.css
bitdashplayer.swf //player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.swf
html5-skin.min.js //player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/html5-skin.min.js
html5-skin.min.css //player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/html5-skin.min.css
skin.json //player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/skin.json
en.json //player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/en.json
assets/ folder https://github.com/ooyala/html5-skin/releases
  1. Download and extract a zip file.
  2. Copy the content of the assets folder into project/assets/.
Note: All resources not hosted by Ooyala (video, audio, images, closed captions, css, js, etc.) that are used with your HTML5-based playback must have the appropriate CORS headers configured. For details, see Cross-domain Hosting Considerations.

Was this article helpful?