Loading Video Plugins

Video plugins create video elements and video wrappers, and decode video encodings. They provide the Ooyala Player information about the encoding and encryption types they support, and the player uses that information, along with a priority order for encodings, to select which plugin to use when playing a stream. You can load any number of video plugins on your page.

Note: Plugins must all be from the same Player V4 version. Mixing versions is not recommended.
Follow these steps to load video plugins for your web page:

See Complete Example to view the code for the entire web page.

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. 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, be sure to check for any path dependencies within the files.

Stream Support per Browser

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.

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

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 VAST ad playback for ads encoded with webm, 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 WEBM streams on desktop web, we recommend using the main_html5.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.

Step 1: Load Supported Video Plugins

To load supported video plugins, create a <script> tag for each video plugin within the head element for your page. The order in which you load the video plugins helps determine which plugin will be used to decode video encodings.

See Hosting Player V4 Resources for a list of currently supported video plugins. The video plugins support HLS and MP4, Flash HDS, and HLS and DASH (with DASH you can only use audio codec formats AAC or mp4a.40.2 audio codecs for this release).

Warning: 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 initialize.
Each tag must specify a src attribute that makes the request to load the plugin. The plugins are loaded immediately, so be sure to load the core player first.
Here is the portion of the web page code that loads a plugin (main_html5.min.js in this example).
  <head>
      <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
      <script src="url_where_hosted/core.min.js"></script>
      <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
      <script src="url_where_hosted/main_html5.min.js"></script>
      <!-- Change these html5-skin.min.css and html5-skin.js to your local build if necessary -->
      <script src="url_where_hosted/html5-skin.min.js"></script>
      <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
  </head>              

Step 2: (Optional) Specify Video Encoding Priority

Having loaded the supported video plugins, you may optionally specify the encoding priority. As you learned in Basic Tutorial for Player V4, you can include embedded parameters. The encodingPriority embedded parameter may be used to specify the priority for video encoding.
The following are best practices for setting encoding priority and using video streams:
  • The default encoding priority is DASH_DRM > HLS_DRM > HLS > DASH > MP4 > HDS >WEBM. We strongly recommend that you use the default encoding unless you have other streaming needs.
  • With DASH, you should always prioritize an alternate stream (do not set the encoding priority to only DASH).
  • For DASH video, you must use the AAC or mp4a.40.2 audio codecs.
See an example of setting the encoding priority below:
<body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "encodingPriority": ["hls", "dash", "mp4", "hds", "webm"],
              "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", "YOUR_ASSET_ID", playerParam);
            });
        </script>
</body>

Complete Example

You now have a complete working example of a web page that loads a supported Ooyala V4 plugin, specifies the encoding priority, and creates the player. In the example below, items in bold must be modified for the example to play a video.

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. 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, be sure to check for any path dependencies within the files.

<!DOCTYPE html>
<html>
  <head>
      
      <script src="url_where_hosted/core.min.js"></script>
      
      <script src="url_where_hosted/main_html5.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>       
<body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "encodingPriority": ["hls", "dash", "webm", "mp4", "hds"],
              "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", "YOUR_ASSET_ID", playerParam);
            });
        </script>
  </body>
</html>

Flash Video Rendering

The OSMF Flash plugin (osmf_flash.min.js), Bitmovin plugin (bit_wrapper.min.js), and Akamai HD plugin (akamaiHD_flash.min.js) can decode and render video in a Flash-based element.

Note: All of the plugins, ad logic, UI, Player APIs, etc. of the player are always in HTML5. The only Flash component is video decoding and rendering if the selected encoding is not supported in HTML5 on a certain browser where Flash is supported. The encoding is selected irrespective of the technology used to render it (the encoding is selected first, then the plugins check to see which renderer to use).
Note: For 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.
Note: For this release, the only way you can render ads with Flash is using VPAID 1.0 Google IMA ads and the google_ima.min.js plugin or VAST HLS ads on Chrome, FF, and IE or VAST DASH ads on Safari.

OSMF Flash Plugin for HDS

You can use the OSMF Flash plugin to decode and render HDS videos. To enable Flash decoding and rendering of HDS videos with the OSMF plugin, you must do the following:

  1. Load the OSMF Flash plugin on your page.
  2. Set the encodingPriority so that hds is the highest available priority. If the encoding priority is not set, lower priority video encodings will be rendered.

Bitmovin Plugin for DASH and HLS

You can use the Bitmovin plugin to decode and render DASH and HLS videos. For DASH streams, this plugin will render in HTML5 if possible. If HTML5 rendering of DASH is not available on the given browser, the video will be rendered in Flash. Note that HLS in Chrome and Firefox will need to be rendered in Flash.

For HLS, all desktop web browser playback will be rendered in Flash. You must have the Flash plugin enabled for HLS playback. If the Flash plugin is not enabled on the browser, the bit_wrapper.min.js plugin will fall back to HTML5 on Safari and Edge browsers.

Note: On Safari and Edge browsers using the Ooyala Player version 4.3.3, HLS will play with Flash if Flash is installed and enabled and has a Flash greater than version 11. If Flash on Safari or Edge is disabled, these browsers will play HLS natively. On Safari and Edge browsers using the Ooyala Player version 4.2.14 and prior, HLS will not use Flash and and will play with the Safari and Edge native implementation (Quicktime for Safari).

Akamai HD Plugin for HDS

You can use the Akamai HD plugin to decode and render Akamai packaged HDS videos. To enable Flash decoding and rendering of Akamai HDS videos with the Akamai HD plugin, you must do the following:

  1. Load the (Akamai HD plugin) on your page.
  2. For live streams, set the encodingPriority so that akamai_hd2_hds is the highest available priority. For VOD streams, set the encodingPriority so that akamai_hd2_vod_hds is the highest available priority. If the encoding priority is not set, lower priority video encodings will be rendered.

Was this article helpful?