Customizing the Player V4 Skin with skin.json
To use skin.json to customize the player look and feel:
- Download the latest version of the skin.json config file:
- Host the skin.json config file on your server.
- Make modifications to the JSON attributes to apply look and feel changes to your player.
- Reference the absolute path to your skin.json file when you load your player.
Settings to Customize in the skin.json File
To view the reference documentation for skin.json, go to apidocs.ooyala.com. 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||Watermark, loading image, and accent color.|
|Responsive Design||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||Start screen settings.|
|Pause Screen||Pause screen settings.|
|End Screen||End screen settings.|
|Up Next Screen||Up Next screen settings.|
|Ad Screen||You can also use the ads embedded parameters described in Configuring Ad Parameters to further customize the ad screen.|
|Social Sharing Options||Share screen settings.|
|Player Watermark||Used to specify the watermark image.|
|More Options Screen||More Options screen settings.|
|Discovery Screen||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. If you are using the V4 HTML5 Player Embed Code (Advanced) (see Configuring Player Embed Settings in Backlot), 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.
|Closed Caption Options||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||Clickto view the button names. Click to see an example button.|
|Player Icons||Icon settings.|
|Player Control Bar||Control bar settings.|
|Player Localizable Strings||For this release, Ooyala offers localized player controls and error messages into Spanish and Simplified Chinese.|