Customizing the Player V4 Skin with skin.json

In addition to using the Backlot UI, you can make customizations to the Player V4 and the Android and iOS skin UX by modifying the key/value pairs in the JSON config file (skin.json). You can use the same skin.json file for your HTML5, Android SDK, and iOS SDK players. To learn more about customization approaches, see Order of Precedence in Player V4 Settings.
Note: For Player V4 Web, rather the customize skin.json directly, you can simply override skin settings on the web page using the skin.inline page-level parameter. For details, see Page-level Parameters for Player V4 and Embed a Simple Player with Inline Player Skin Modifications.

Customization Steps

To use skin.json to customize the player look and feel:

  1. Download the latest version of the skin.json config file:
  2. Host the skin.json config file on your server.
  3. Make modifications to the JSON attributes to apply look and feel changes to your player.
  4. Reference the absolute path to your skin.json file when you load your player.
Note: Customize skin.json only if you want to change configuration settings in the file. Alternatively, you can simply use the default settings. Alternatively, if you want to override some skin settings, you can use the skin.inline parameter when you embed Player V4 on a web page. See Page-level Parameters for Player V4 for details.

Settings to Customize in the skin.json File

To view the reference documentation for the skin.json file, go to Player V4 JSON Schema. The following table shows the path to the documentation for each customizable player component. See User Interface for the Player V4 Skin for a description of the player components.

Player Component Path to Documentation Notes
General properties > General Watermark, loading image, and accent color.
Responsive Design properties > responsive For videos with an aspect ratio where the height of the video is greater than the width or the width is much greater than the height, we recommend that you use our default responsive design setting (aspectRatio:auto).
Start Screen properties > startScreen Start screen settings.
Pause Screen properties > pauseScreen Pause screen settings.
End Screen properties > endScreen End screen settings.
Up Next Screen properties > upNext Up Next screen settings.
Ad Screen properties > adScreen You can also use the ads embedded parameters described in Configuring Ad Parameters to further customize the ad screen.
Social Sharing Options properties > shareScreen Share screen settings.
Player Watermark properties > general > watermark Used to specify the watermark image.
More Options Screen properties > moreOptionsScreen More Options screen settings.
Discovery Screen properties > discoveryScreen Any Discovery settings you make in Backlot will be overwritten by the settings specified in skin.json.
Note: You must have Discovery enabled in Backlot for Discovery recommendations to appear. If Discovery is not enabled, the Discovery icon will not appear in the control bar or more options menu.
Depending on the type of embed code you use (see Configuring Player Embed Settings in Backlot):
  • If you are using the V4 HTML5 Player Embed Code (Advanced) , you must load the Discovery module (<script src="url_where_hosted/discovery_api.min.js"></script>) in the <head> of the page where you load your player.
  • If you are using the V4 HTML5 Standard Player Embed Code, the plugin is automatically loaded by default.
Closed Caption Options properties > closedCaptionOptions You can configure closed captions for VOD (all streams) and Live (HLS on Safari) content. By default, the player will show a closed caption button for all assets with closed captions. To enable closed captions for a video, simply upload your closed caption file for your asset. See Uploading a Closed Caption File in Backlot and Ingesting Closed Caption Files.
Player Buttons properties > buttons Click definitions > buttonNames to view the button names. Click definitions > moreOptionsButton to see an example button.
Player Icons properties > icons Icon settings.
Player Control Bar properties > controlBar Control bar settings.
Player Localizable Strings properties > localization For this release, Ooyala offers localized player controls and error messages into Spanish and Simplified Chinese.