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.
Important: If you use Backlot to generate your HTML embed code, and you choose the V4 HTML5 Standard Player Embed Code (recommended) option, certain video plugins are automatically included and should not be explicitly added to the web page where you launch the player. For details, see Configuring Player Embed Settings in Backlot.
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. 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.

Stream Support per Browser

Note: The OSMF and Akamai plugins (deprecated) 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: 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: 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.
Browser HLS and eHLS DASH MP4 HDS (Deprecated)
Chrome v47+ bit_wrapper.min.js bit_wrapper.min.js bit_wrapper.min.js or main_html5.min.js osmf_flash.min.js (Deprecated) or akamaiHD_flash.min.js for Akamai packaged HDS (Deprecated)
Safari v8+ bit_wrapper.min.js or main_html5.min.js bit_wrapper.min.js (remote and local assets supported in Player v4.3.3+) bit_wrapper.min.js or main_html5.min.js osmf_flash.min.js (Deprecated) or akamaiHD_flash.min.js for Akamai packaged HDS (Deprecated)
Firefox v43+ bit_wrapper.min.js bit_wrapper.min.js bit_wrapper.min.js or main_html5.min.js osmf_flash.min.js (Deprecated) or akamaiHD_flash.min.js for Akamai packaged HDS (Deprecated)
Internet Explorer v11(1) bit_wrapper.min.js bit_wrapper.min.js bit_wrapper.min.js or main_html5.min.js osmf_flash.min.js (Deprecated) or akamaiHD_flash.min.js for Akamai packaged HDS (Deprecated)
Microsoft Edge bit_wrapper.min.js or main_html5.min.js bit_wrapper.min.js bit_wrapper.min.js or main_html5.min.js osmf_flash.min.js (Deprecated) or akamaiHD_flash.min.js for Akamai packaged HDS (Deprecated)
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

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 it first, before the other video plugins.
  • 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 the Bitmovin plugin for DASH and HLS, OSMF Flash plugin for HDS (Deprecated), or the Akamai HD video plugin for Akamai packaged HDS (Deprecated).

Step 1: Load Supported Video Plugins

Note:
  • If you use Backlot to generate your HTML embed code, and you choose the V4 HTML5 Standard Player Embed Code (recommended) option, the Bitmovin plugin for HLS and DASH (bit_wrapper.min.js) and Main video plugin for HLS and MP4 (main_html5.min.js) are automatically included and should not be explicitly added to the web page where you launch the player. For details, see Configuring Player Embed Settings in Backlot. You can also override the default plugins by specifying only the plugins you want to load (see Specifying Plugins for the Standard Embed Code).
  • If you choose the V4 HTML5 Player Embed Code (Advanced) option in Backlot, or if you manually create the HTML embed code yourself, you need to add these plugins your web page so that they load before the player is created.
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 Ooyala-hosted 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 play videos.
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.
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.
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"]. 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"],
              "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. 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.

<!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", "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 Bitmovin plugin (bit_wrapper.min.js), OSMF Flash plugin (osmf_flash.min.js, Deprecated), and Akamai HD plugin (akamaiHD_flash.min.js, Deprecated) can decode and render video in a Flash-based element.

Considerations

Important: Browsers are starting to drop default support for Flash. Are you ready? See the Player V4 Resources page and the Player Migration FAQ for details.
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.

Bitmovin Plugin for DASH and HLS

You can use the Bitmovin plugin to decode and render DASH and HLS videos. This plugin will render in HTML5, if possible. If HTML5 rendering is not available on the given browser, the video will be rendered using Flash. Safari and Edge will play HLS natively. There are also some restrictions with the Bitmovin plugin, which are noted in Ooyala-hosted Player V4 Resources.

OSMF Flash Plugin for HDS (Deprecated)

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.

Akamai HD Plugin for HDS (Deprecated)

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.

해당 내용이 도움 되었습니까?