Player V4 FAQ

Player V4 Overview

Q: What is Player V4?

A: Ooyala's next generation video player for HTML5 is designed to provide an engaging, personalized, content aware, and robust video playback experience that is consistent across devices and platforms. See Player V4 for a full list of features.

Q: How does Player V4 differ from earlier Ooyala players?

A: Player V4 has a responsive and customizable UI that you can use out-of-the-box or customize to your branding needs. It’s very simple to embed in your web site, with the user interface configurable from our Backlot CMS. Its modular architecture allows a wide range customizations, simply by configuring the player in the Backlot UI, by modifying a JSON configuration file, or even updating player CSS to make branding and UI customizations perfect for your brand.

While the Ooyala Player V3 was a Flash-first player by default, Player V4 is built and optimized for HTML5 playback. The Player V4 has built-in Flash-failover as needed using the bit_wrapper.js plugin (recommended), or OSMF plugin where Adobe Access DRM is still needed. See Flash Video Rendering for details on Flash video rendering.

Player V4 is a modular player consisting of plugins, which means that you can add or remove certain functionality depending on which plugins you load on your HTML page. The modular architecture of Player V4 allows for a much smaller embed footprint, faster load times, and many more customization options.

Player V4 features a new Ad Manager Framework with robust ad support, and an Analytics Framework that allows you to integrate third-party analytics providers with the player. See Player V4 for a full list of features.

Q: How does Player V4 look to users?

A: Player V4 has a simple and accessible user interface that is optimized to run in many environments. See User Interface for the Player V4 Skin for descriptions of the Player V4 UI components.

Supported Features

Q: What features are supported in this version of Player V4?

A: See Ooyala Player V4 Release Notes for a list of features released in the latest version of Player V4.

Q: Does Player V4 integrate with social networks?

Q: Yes, Player V4 supports integrations with Facebook, Twitter, and Google Plus.

Q: Can Player V4 controls be translated (localized)?

A: Yes. We offer localization files for English, Spanish, Japanese, and Simplified Chinese, but you can also add your own localization files.

Q: What closed caption languages does Player V4 support?

A: You can upload your own closed caption languages. Supported languages are listed at Closed Captions - Supported Languages.

Q: Is QoS analytics supported in Player V4?

A: Yes. For details, see YOUBORA Analytics Plugin and Conviva Analytics Plugin.

Is a comScore integration supported for Player V4?

A: Yes, Player V4 supports an out-of-the-box integration with comScore. Please contact your Ooyala account manager to use the Player V4 comScore integration. For details, see comScore Analytics Plugin

Getting Started with Player V4

Q: Once I am up set up with Player V4, do I need to do continuous developer work to keep up with Ooyala monthly releases?

A: No. If you are using the Ooyala Player V4 Standard embed code, or the resource paths for Production or Production/Latest, then your embed players will automatically get updates. Ooyala hosts two release paths (production and latest, as described in Ooyala-hosted Player V4 Resources) so that you are automatically upgraded to the latest version on that path.

If you are self-hosting (Hosting Player V4 Resources), all you need to do is pull/clone the latest versions of the plugins and player files.

Q: Can I mix and match files from different release versions (for example, skin.json from 4.11.13 and ad_manager_vast.js from 4.10.6)?

A: We strongly recommend using all files from the same release version.

Q: What does Player V4 have to do with the video mobile SDKs for iOS and Android?

A: Player V4 and the mobile SDKs for iOS and Android share the same look and feel (skin). When we refer to the Player V4 skin, we are referring typically to the skin.json file that can be used to apply player UX to the HTML5 Player V4 and the mobile SDK players. However, there are some differences in skin configurations that are supported by platform.

Q: Are there any special cases where Player V4 will be forced to load Flash instead of HTML5? In case the player is handling VPAID ads what would be the behavior? Will a Flash player be loaded at the beginning or only when serving the Ad? Would the actual content still be played in HTML5 player?

A: The core player will always be HTML5-based in Player V4. If the selected encoding is not supported in HTML5 on a certain browser and if Flash is supported, the main video will render in Flash. The rest of the player including the UI will remain HTML5-based. For VPAID 1.0, the VPAID ad will render in a Flash-based element, but the rest of the player will remain HTML5-based, including the main video, assuming the main video wasn't already playing in a Flash renderer. See Flash Video Rendering for details on Flash video rendering.

Q: Which browsers and browser versions work with Player V4?

A: See Supported Browsers and Operating Systems for Player V4 for a full list of browsers to use with Player V4.

Q: How do I embed Player V4 into my website?

A: See Embedding Player V4 on a Web Page for detailed developer documentation on how to embed Player V4 into your website. See Configuring Player Embed Settings in Backlot for documentation on how to copy the Player V4 embed code from Backlot.

Customizing Player V4

Q: What can I configure in the new player?
A: Player V4 is highly customizable. You can:
  • Enable Discovery content recommendation.
  • Configure the player look and feel (skin) using a JSON config file, by specifying player settings directly in HTML pages, or by modifying the Player CSS and resources (see Customizing the Player V4 Appearance) .
  • Use the message bus to make additional event-driven customizations.
  • Localize player controls and error messages.
  • Configure HTML5 or Flash video rendering. Note that all of the plugins, ad logic, UI, Player APIs, etc. are always in HTML5. The only Flash component is video decoding and rendering for HDS and DASH. See Flash Video Rendering for details on Flash video rendering.

Q: Can I customize the Player V4 UI with Backlot

A: Yes - see Configuring a Player in Backlot. You can also make customizations to the player by customizing the player CSS or the skin.json config file (see Configuring a Player in Backlot).

Q: How can I add another social sharing option to the player (beyond the default Facebook, Twitter, Google Plus)?

A: You can add additional social sharing options by altering the skin code directly. The code associated with social sharing is located in the html5-skin repository at html5-skin/js/views/shareScreen.js.

Q: How can I add a watermark image clickthrough URL?

A: You can specify a watermark image clickthrough URL in Backlot (PUBLISH > Player Branding > Branding), or in skin.json (specifically with controlBar.watermark.clickUrl). See Customizing the Player V4 Skin with skin.json for details on how to modify skin.json.

Q: How do I configure autoplay with embedded parameters?

A: See the player embedded parameter documentation for details on how to use the autoplay parameter. Set autoplay to true to enable autoplay behavior.

Q: How can I remove items from the control bar?

A: You can delete unneeded items from the buttons array in the skin.json config file.

Q: What are best practices for setting my video container size?

A: If you know your video aspect ratio, set the video container size to a size that corresponds to the aspect ratio of the video.

Q: If I customize the player, will Ooyala Technical Support help me debug my code?

A: Ooyala will support any pre-defined and valid modifications to the skin.json file. If you fork the skin-config repository and make non-valid modifications, or if you fork the html5-skin repository and make changes, we will not offer technical support for these changes.

Using Video Plugins to Decode and Render Video Streams

See Loading Video Plugins for details.

Q: Does “encodingPriority": ["hls", "mp4", "dash”] mean that first the player will try to load an HLS stream, then if it is not available, it will try to load an MP4 stream, then if it is not available, it will try to load a dash stream, and so on?

A: The video controller will only attempt to select a single stream. Encoding priority is a way to set the stream preference order. Internally the player will look at what stream type is available and what stream type is playable by the video plugins you’ve loaded on the page and will try to play the first available stream.

Q: Can I specify the starting bitrate for adaptive bitrate (ABR)?

A: Yes, see Programming Bitrates and Buffering for Player V4 Using JavaScript for details on how to do this.

Q: Should I use DASH?

A: For many applications, you can use HLS for most common scenarios. However, there are situations where using DASH can provide better performance and/or additional capabilities such in conjunction with Widevine Modular DRM. If DASH encoding is added to your processing profile, you might have to re-process your assets in order to leverage DASH encoding for your existing assets. Please note that DASH migration is not mandatory.

Q: Why do some of the video plugins (Bitmovin and OSMF Flash) still have the ability to render video in Flash? I thought the industry was moving away from Flash?

A: Migrating assets to be HTML5-compatable stream formats can be expensive and time-consuming. We are continuing to support Flash playback for customers who are still in the process of migrating their asset libraries.

Using Ad Plugins to Play Ads

See Ads in Player V4 for details.

Q: Do I need to ask Ooyala Technical Support to enable anything for Player V4 ad plugins to work?

A: If you are creating ad sets in Backlot, you need to ask Ooyala Technical Support to enable ad managers for your account, but other than that, all you need to do is load the plugins on your page.

How do the ad plugins interact with the player?

A: Ad plugins interact with the V4 player through the Ad Manager Framework, a unified framework that handles basic ad functionality, which allows ad managers to plug into Ooyala with less effort.

Q: How is integrating with ad managers different in Player V4 compared to Player V3?

A: Player V4 is built in a modular way, where ad functionality is implemented using different plugins. See Player V4 Plugins for the full list of plugins available. With the new Ad Manager Framework for Player V4, configuration parameters and some page level settings are different from Player V3. If you don't have any page level overrides to Backlot settings, your ads will have full backwards compatibility. See Migrating to Player V4 for full details on what configuration parameters and page level settings have changed.

Q: Does Player V4 integrate with Pulse?

A: Yes. There is a Pulse plugin for Player V4 (HTML5). Pulse also currently integrates with the iOS and Android video SDKs. See Ooyala Pulse Ad Plugin for details.

Q: Does Player V4 support Ooyala Ads / My Ads (Backlot content served as video ads)?

A: Yes, but only as pre-rolls, and only with MP4-type assets currently. For more extensive options, please consider our VAST or Ooyala Pulse ad plugins.

Troubleshooting Player V4

Q: I'm seeing the player frame expand to an extremely large size. What's happening?

A: Player V4 has new responsive design features. By default, as long as the container 's width is bounded, the height will dynamically adjust according to the video's aspect ratio. If you already know the aspect ratio of the video, you can also try to override the skin.json setting to fix the skin's aspect ratio. Change the value of aspectRatio (shown below) in skin.json to your video's aspect ratio. You can calculate the aspect ratio using height / width * 100. For a 4:3 video, 3 / 4 * 100 = 75, and for a 16:9 video, 9 / 16 * 100 = 56.25.
"responsive": {
    "breakpoints": {
     ....
    },
    "aspectRatio": "auto"  
  }

Q: I copied from your example on GitHub but I'm getting 404 errors related to the page referencing local files. Why is this happening?

A: Our example on GitHub uses the default skin.json file (see Ooyala-hosted Player V4 Resources), which references 3 files: config/es.json, config/en.json, and config/zh.json, which are our default localization files for the player. If you want to use our example out of the box, you'll need to get those files to resolve. You can either download and modify skin.json to point to absolute file paths, or copy the three language files into your website's file structure (such as http://your-site.com/testpage/config/en.json).

Q: I'm seeing poor video quality when the player starts up. How can I improve the video quality?

A: You can use the initialBitrate parameter to set the initial minimum bitrate level (immediately after video playback) and to sustain that level for a specific period of time. For details, see Page-level Parameters for Player V4).

Q: Why are the player buttons now appearing as letters?

A: If you are customizing the player and are now seeing the play button appear as an 'h', then you likely have made reference to the new location of the html5-skin.css file but not the necessary assets directory (particularly the font files within the assets directory). By hosting the assets directory in the same location as your html5-skin.css file, you can resolve the missing icons and even update the icons file with new icons of your own.

Was this article helpful?