Hosting Player V4 Resources

Ooyala hosts default Player V4 resources. If you want to make customizations to the default player, Ooyala recommends that you host your Player V4 resources, including 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 load.

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.

The following is a list of supported plugins for Player V4.

Note: You need to replace latest_player_version with the latest player version (for example, 4.6.9).
To update to the latest Player V4 version from a previous version of Player V4:
  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.
Resource Default Location Notes
Core Player http://player.ooyala.com/static/v4/stable/latest_player_version/core.min.js Required. To host this plugin, copy the file from its default location to the host server.
Bitmovin Video Plugin for DASH and HLS Player V4 Version 4.11.14
Host all of the following files in the same location:
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bit_wrapper.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer-controls.min.css
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer-controls.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer-core.min.css
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer-core.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer-vr.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.14/video-plugin/bitmovinplayer.swf
Player V4 Version 4.11.13
Host all of the following files in the same location:
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bit_wrapper.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer-controls.min.css
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer-controls.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer-core.min.css
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer-core.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer-vr.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer.min.js
  • http://player.ooyala.com/static/v4/stable/4.11.13/video-plugin/bitmovinplayer.swf
Player V4 Version 4.10.6 or earlier
Host all of the following files in the same location:
  • http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/bit_wrapper.min.js
  • http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/bitdashplayer.min.js
  • http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/bitdashplayer.swf
At least one video plugin is required. See Loading Video Plugins. To host this plugin, copy the file from its default location to the host server.

Required for Live DVR (HLS streams only).

For DASH video, you must use the AAC or mp4a.40.2 audio codecs.

Note: You cannot use this plugin with iOS. Please note that you can still include the Bitmovin plugin on the page (it just won’t do anything).
Note: For this release, this plugin does not support Live closed captions for HLS.
Note: The order of the video plugins represents the order of priority for the plugin usage. For HTML5 video, we recommend loading the bit_wrapper.min.js first, followed by main_html5.js.
Main Video Plugin for HLS and MP4 http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/main_html5.min.js At least one video plugin is required. See Loading Video Plugins. To host this plugin, copy the file from its default location to the host server.
OSMF Flash Video Plugin for HDS http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/osmf_flash.min.js

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

At least one video plugin is required. See Loading Video Plugins. To host this plugin, copy the file from its default location to the host server.

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.

Note: The Flash HDS plugin does not currently support IMA Ad Rules.
Akamai HD Video Plugin for Akamai Packaged HDS http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/akamaiHD_flash.min.js At least one video plugin is required. See Loading Video Plugins. To host this plugin, copy the file from its default location to the host server.
Ooyala Player Plugin for YouTube iFrame http://player.ooyala.com/static/v4/stable/latest_player_version/video-plugin/youtube.min.js See Playing YouTube Videos in Player V4.
  • To host this plugin, copy the file from its default location to the host server.
HTML5 Skin http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/html5-skin.min.js See Customizing the Player V4 Appearance.
Skin CSS http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/html5-skin.min.css See Customizing the Player V4 Appearance.
Skin Config File http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/skin.json See Customizing the Player V4 Skin with skin.json.
Skin iFrame http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/iframe.html See Embedding Player V4 in an HTML iframe.
Ooyala Pulse Plugin http://player.ooyala.com/static/v4/stable/latest_player_version/ad-plugin/pulse.min.js See Ooyala Pulse Ad Plugin. To host the plugin, go to the default location and download the file.
Ooyala SSAI Pulse Plugin for Live Ad Insertion http://player.ooyala.com/static/v4/stable/latest_player_version/ad-plugin/ssai_pulse.min.js To host the plugin, go to the default location and download the file.

It is assumed that if the SSAI Pulse plugin is loaded that the stream will have server side ads inserted.

FreeWheel Plugin http://player.ooyala.com/static/v4/stable/latest_player_version/ad-plugin/freewheel.min.js See FreeWheel Ad Plugin.
Note: To support FreeWheel ad playback, you must also include the Main Video Plugin. See Loading Video Plugins.
VAST and VPAID Plugin http://player.ooyala.com/static/v4/stable/latest_player_version/ad-plugin/ad_manager_vast.min.js See VAST and VPAID Ad Plugin.
Note: To support VPAID ad playback, you must load the Main Video Plugin first among the video plugins.
Google IMA Plugin http://player.ooyala.com/static/v4/stable/latest_player_version/ad-plugin/google_ima.min.js See Google IMA Ad Plugin.
comScore Plugin Please contact your Ooyala account manager for access to this plugin. See comScore Analytics Plugin.
  • This plugin was created by and will be maintained by comScore
  • To host this plugin, copy the file from its default location to the host server.
Adobe Analytics (Omniture) Plugin
  • http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/VideoHeartbeat.min.js.
  • http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/AppMeasurement.js.
  • http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/VisitorAPI.js.
  • http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/omniture.min.js.
See Adobe Analytics (Omniture) Plugin.
  • To host this plugin, copy the file from its default location to the host server.
YOUBORA Analytics Plugin
  • http://smartplugin.youbora.com/v5/javascript/ooyalav4/stable/sp.min.js
  • https://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.
Because NPAW maintains the YOUBORA Analytics plugin for Player V4, use either of these links to load the latest version. See YOUBORA Analytics Plugin
Google Analytics plugin http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/googleAnalytics.min.js See Google Analytics Plugin. To host this plugin, copy the file from its default location to the host server.
Nielsen Analytics plugin http://player.ooyala.com/static/v4/stable/latest_player_version/analytics-plugin/Nielsen.min.js See Nielsen Analytics Plugin. To host this plugin, copy the file from its default location to the host server.
Discovery plugin http://player.ooyala.com/static/v4/stable/latest_player_version/other-plugin/discovery_api.min.js See Customizing the Player V4 Skin with skin.json. To host this plugin, copy the file from its default location to the host server.
Playlists plugin http://player.ooyala.com/static/v4/stable/latest_player_version/other-plugin/playlists.js See Using Playlists in Player V4. To host this plugin, copy the file from its default location to the host server.
Localization Files
  • http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/en.json
  • http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/es.json
  • http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/zh.json
See Localizing the Player V4 UI for instructions on how to add your own localization files.
Images and Fonts
  • http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/assets/images/ooyala-watermark.png
  • http://player.ooyala.com/static/v4/stable/latest_player_version/skin-plugin/assets/images/ooyala.png
Image and font resources are required for the player skin to appear properly. In general, image and font files can be found in the GitHub repository at
  • html5-skin/assets/fonts
  • html5-skin/assets/images

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 OSMF Flash plugin (osmf_flash.min.js), Bitmovin plugin (bit_wrapper.min.js), or Akamai HD plugin (akamaiHD_flash.min.js), 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.

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 http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/core.min.js
main_html5.min.js http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/main_html5.min.js
bit_wrapper.min.js http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bit_wrapper.min.js
bitdashplayer.min.js http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.min.js
bitdashplayer.min.css http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.min.css
bitdashplayer.swf http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/video-plugin/bitdashplayer.swf
html5-skin.min.js http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/html5-skin.min.js
html5-skin.min.css http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/html5-skin.min.css
skin.json http://player.ooyala.com/static/v4/stable/RELEASE_VERSION/skin-plugin/skin.json
en.json http://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?