Customizing the Player V4 Skin with skin.json

You can make customizations to the Player V4 and new 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 use skin.json to customize the player look and feel, do the following:

  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. 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.
Note: You must host your own version of the skin.json config file if you are using skin.json to make player look and feel customizations. You can host the rest of the player code yourself as well, or can reference the plugins and code hosted by Ooyala. If possible, we recommend hosting the player code and plugins yourself.

To view the API documentation for skin.json, go to 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
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  
Pause Screen properties > pauseScreen  
Player Control Bar properties > controlBar  
End Screen properties > endScreen  
Up Next Screen properties > upNext  
Ad Screen properties > adScreen
Note: For the Google IMA ad plugin and the VAST and VPAID plugin rendering VPAID 2.0 ads, the ad control bar and ad marquee configurations in skin.json are ignored (and are forcibly set to off) because both of these render ads and the UI, which can have interactivity at various locations unknown to the plugins themselves. Rather than risk blocking any interactivity with our ad marquee or ad control bar, we made sure to hide them.
You can also use the ads embedded parameters described in Configuring Ad Parameters to further customize the ad screen.
Social Sharing Options properties > shareScreen  
Player Watermark properties > general > watermark  
More Options Screen properties > moreOptionsScreen  
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. For HTML5 players, for Discovery to work, 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 Discovery is not enabled, the Discovery icon will not appear in the control bar or more options menu.
Closed Caption Options properties > closedCaptionOptions We now offer closed caption support for VOD (all streams) and Live (HLS on Safari) content with the Player V4. 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 in the Backlot UI or via the Backlot API. Supported closed caption formats include DFXP v2006 format and embedded CES-608.
Player Buttons properties > buttons Click definitions > buttonNames to view the button names. Click definitions > moreOptionsButton to see an example button.
Player Icons properties > icons  
Player Localizable Strings properties > localization For this release, Ooyala offers localized player controls and error messages into Spanish and Simplified Chinese.

Was this article helpful?