Customizing the Player V4 Appearance

Customizable Components

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

Ways to Customize

For this release you can customize the UX of your player in the following ways:

  • 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 Hosting 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. 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.

    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.

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.

You can change the default player images to any images you prefer. Please note that these files must follow the same hosting procedures as all other player files (they must be CORS-enabled, as described in Cross-Origin Resource Sharing (CORS)).

How to Customize

Was this article helpful?