Player V4 Plugins

Player V4 is a modular player consisting of plugins, which means that you can add or remove certain player functionality depending on which plugins you load on your HTML page. Some plugins are required for your player to function and other plugins are optional, depending on what functionality you want your player to have. For details on the default location of these plugins and how to download them, see Hosting Player V4 Resources.

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

Required Plugins

Required plugins include:

See Flash Video Rendering for details on Flash video rendering.

Optional Plugins

Optional plugins include:

Plugin Best Practices

The following are best practices for using the video plugins.
  • You must load the Core Player and at least one video plugin for Player V4 to function properly.
  • Generally, when using the bit_wrapper.min.js plugin, you should always load the main_html5.min.js plugin first.
  • You cannot use the bit_wrapper.min.js plugin with iOS. Please note that you can still include this plugin on the page (it just won’t do anything). This means that you don’t have to change which plugins you load based on device.
  • To support FreeWheel ad playback, you must include the main_html5.min.js plugin.
  • To support VPAID ad playback, you must load the main_html5.min.js plugin first among the video plugins.
  • The osmf_flash.min.js plugin does not currently support Google IMA Ad Rules.
  • For DASH streams on desktop web, we recommend using the bit_wrapper.min.js plugin with Chrome.
  • For MP4 streams, we recommend using the main_html5.min.js plugin.
  • If you would like to use HLS streams on desktop, we recommend that you use our bit_wrapper.min.js plugin on Chrome, Firefox and Internet Explorer. For Safari and Edge we encourage you to use the main_html5.min.js plugin instead.
  • The main_html5.min.js plugin does not report bitrate information. If you want to track bitrate information (see Analytics in Player V4), you must use the OSMF Flash plugin for HDS, the Bitmovin plugin for DASH and HLS, or the Akamai HD video plugin for Akamai packaged HDS.

Stream Support per Browser

Note: The OSMF and Akamai plugins allow backwards compatibility with existing HTTP Dynamic Streaming (HDS) and Akamai HDS (or HD2) assets. However, HDS and HDS2 use a Flash component, and browsers will soon be disabling the Flash plugin. Going forward, Ooyala strongly recommends that customers encode and use HLS and Dash instead. This may involve re-encoding existing assets where possible. Given industry changes and the increased importance of mobile playback, we expect to deprecate support for Flash-based formats (such as HDS and HD2) soon. Customers should consider these as legacy formats that are being phased out over time.

Desktop Web Stream and Browser Support

The following table shows which Ooyala video plugin to load for each stream type and browser for desktop web players.
Note: (1)HLS and eHLS are supported only on Windows 8+.

Mobile Web Stream and Browser Support

The following table shows which Ooyala video plugin to load for each stream type and browser for mobile web players.
Browser HLS and eHLS DASH MP4
Android v4.1 and v4.3+ Chrome
iOS v8+ Safari Not supported

Stream Options

Note: The HTTP Dynamic Streaming (HDS), including Akamai HDS (or HD2) streaming protocol, uses a Flash component. Browsers will soon be disabling disabling the Flash plugin. Going forward, Ooyala strongly recommends that customers encode and use HLS and Dash instead. This may involve re-encoding existing assets where possible. Given industry changes and the increased importance of mobile playback, we expect to deprecate support for Flash-based formats (such as HDS and HD2) soon. Customers should consider these as legacy formats that are being phased out over time.
Device Supported Streams Recommended Stream Supported Player V4 Plugins
Desktop MP4, HLS, eHLS, HDS, DASH HLS
Android Web MP4, HLS, eHLS, DASH DASH
iOS Web MP4, HLS, eHLS HLS
Android App MP4, HLS, eHLS, DASH HLS or DASH N/A - use the mobile SDK for Android
iOS App HLS, eHLS, MP4 HLS N/A - use the mobile SDK for iOS
Note: Player V4 is not supported on Xbox, Roku, Amazon Fire TV, Connected/Smart TVs, or Chromecast devices for this release.

Deciding Which Plugins to Load

The following table shows which plugins you should load given your specific use case:
If you want to... Load the following in your HTML page...
Load a V4 player without the Ooyala skin
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)

See Examples of Player V4 Web Page Embedding for a general implementation example.

See Flash Video Rendering for details on Flash video rendering.

Load a V4 player with the Ooyala skin
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)

See Examples of Player V4 Web Page Embedding for a general implementation example and Customizing the Player V4 Appearance for details on how to customize your player.

Load a V4 player with the Ooyala skin and Ooyala Pulse ad functionality
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)
  • Ooyala Pulse ad plugin (pulse.min.js)
Note: If you are using the Freewheel, VAST, or Google IMA ad plugins, you can load multiple ad plugins on a page (Integrating Multiple Ad Managers). Otherwise, you can load only one ad plugin per player (at a time).

See Integrating Ooyala Pulse Ads for an implementation example.

Load a V4 player with the Ooyala skin and FreeWheel ad functionality
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)
  • FreeWheel ad plugin (freewheel.min.js)
Note: If you are using the Freewheel, VAST, or Google IMA ad plugins, you can load multiple ad plugins on a page (Integrating Multiple Ad Managers). Otherwise, you can load only one ad plugin per player (at a time).

See Integrating FreeWheel Ads for an implementation example.

Load a V4 player with the Ooyala skin and VAST and/or VPAID ad functionality
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)
  • VAST and VPAID ad plugin (ad_manager_vast.min.js)
Note: If you are using the Freewheel, VAST, or Google IMA ad plugins, you can load multiple ad plugins on a page (Integrating Multiple Ad Managers). Otherwise, you can load only one ad plugin per player (at a time).

See Integrating VAST and VPAID Ads for an implementation example.

Load a V4 player with the Ooyala skin and Google IMA ad functionality
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)
  • Google IMA ad plugin (google_ima.min.js)
Note: If you are using the Freewheel, VAST, or Google IMA ad plugins, you can load multiple ad plugins on a page (Integrating Multiple Ad Managers). Otherwise, you can load only one ad plugin per player (at a time).

See Integrating Google IMA Ads for an implementation example.

Load a V4 player with the Ooyala skin and Ooyala Discovery functionality
  • Core player (core.min.js)
  • At least one video plugin
    • HLS and MP4 Main video plugin (main_html5.min.js)
    • OSMF Flash plugin for HDS (osmf_flash.min.js)
    • Bitmovin plugin for DASH and HLS (bit_wrapper.min.js)
    • Akamai HD video plugin for Akamai packaged HDS (akamaiHD_flash.min.js)
  • HTML5 skin plugin (html5-skin.min.js)
  • Skin CSS (html5-skin.min.css)
  • Skin customization file (skin.json)
  • Discovery plugin (discovery_api.min.js)

See Examples of Player V4 Web Page Embedding for a general implementation example.

Combining Player V4 Plugin Files

When hosting plugins, 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>            

Was this article helpful?