Customizing the Player V4 Appearance

Customizable Components

The following web, mobile web, and mobile SDK player UX components are customizable:

Ways to Customize

You can customize the UX of your player in the following ways:

  • Backlot. Configure Player V4 using the Backlot GUI. For details, see Configuring a Player in Backlot.
  • Modify the JSON config file (HTML5, iOS SDK, and Android SDK): Modify the skin.json config file to make basic UX customizations, such as player controls, state screens, branding, etc. Host your own customized version of skin.json and reference it when you load your player. You can use the same skin.json file across your HTML5, Android SDK, and iOS SDK players. For the default location of this file, see Ooyala-hosted Player V4 Resources. Go to Skin Schema and click properties to view the JSON schema reference documentation for skin.json. See Customizing the Player V4 Skin with skin.json for details on where to look in the API documentation for each player component you want to customize.

    If you are customizing the player through the skin.json config file, all you need to understand is HTML and CSS.

  • Modify CSS Settings (HTML5): Make advanced interface customizations by modifying the CSS (such as the html5-skin.min.css file). For details, see Customizing the Player V4 Appearance Using CSS.
  • Use embedded parameters on the page (HTML5 only): Override skin settings when you create the player through embedded parameters on the page level. For example, if you wanted to hide the description text and render the play button blue on the start screen of your HTML5 player, you would add the following parameters to your page:
    var playerParam = {
      "skin": {
        "config": "//url_where_hosted/skin.json",
        "inline": {
          "startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
        }
      }
    };                   
    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.

    See the section "Create a Simple Player with Inline Player Skin Modifications" in Examples of Player V4 Web Page Embedding for more details on how to make inline customizations.

  • Fork and modify the source code. (HTML5, iOS SDK, and Android SDK): Fork and modify the source code to make advanced customizations such as adding custom fonts and images.
    Warning: 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 ios-skin or html5-skin repositories and make changes, we will not offer technical support for these changes.

    If you are forking the skin code and making more complex customizations, you need to understand HTML, CSS, JavaScript, and the Ooyala approach to using React Native. For web players we use the standard React Native implementation. For iOS and Android players, we have implemented custom Ooyala React components.

    For more information on Ooyala and React, see Player V4 Skin and the React Application Framework.

Order of Precedence

Where the same configuration setting (for example, player background color) is controlled by different mechanisms, one mechanism prevails and appears to the viewer during playback. See Order of Precedence in Player V4 Settings for more information.

End User Personalization

End users can personalize their players by selecting settings for the following features.
  • Set closed captions to on or off.
  • Set autoplay to on or off.
  • Select a bitrate.

These settings will persist for the user after they make their selections the first time. The user information is tracked via cookies and/or device storage.

Best Practices

For the optimal end user experience with your brand, we recommend, at a minimum, that you update the following components of the default player. For more best practices to follow when customizing your player, see http://community.ooyala.com/t5/Ooyala-Player-V3-Knowledge-Base/Best-Practices-for-Customizing-Player-V4/ta-p/8440.

Player Component Default Value How to Customize
Brand colors white

You can change the title font color on the different player screens by changing the color values in the titleFont>color elements in skin.json.

You can change the color of the icons in the control bar by updating the color values in the controlBar >iconStyle element in skin.json.

To change the color of the play button on the startScreen, update the color value in the startScreen>playIconStyle element in skin.json.

Logo Ooyala logo
Image resources are located in html5-skin/assets/images.

You can specify which image is used as the watermark image on the player by updating the imageResource path specified in the watermark element in skin.json.

How to Customize

Was this article helpful?