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)

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 (Deprecated)

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.

Tips for Hosting Player V4
Resources

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).

Optionally, change any of the file(s) that you want to customize.

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 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.

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:

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.

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.