skin-schema JSON Schema
{
"description": "This JSON schema describes the base UI configuration for the Ooyala Player, which can be customized in the skin.json file. Also see https://facebook.github.io/react and https://facebook.github.io/react-native.",
"type": "object",
"additionalProperties": false,
"required": [
"general",
"startScreen",
"pauseScreen",
"endScreen",
"upNext",
"moreOptionsScreen",
"discoveryScreen",
"closedCaptionOptions",
"icons",
"buttons",
"controlBar",
"shareScreen",
"localization"
],
"properties": {
"general": {
"description": "Configuration of things that do not appear in only one part of the UI.",
"type": "object",
"properties": {
"watermark": {
"description": "An object that defines the URL of a watermark on the player screen.",
"type": "object",
"additionalProperties": false,
"properties": {
"imageResource": {
"description": "Specify how to obtain an image's data. Desktop will use the url. Mobile will first lookup the native resource, with fall back to the url.",
"type": "object",
"additionalProperties": false,
"minProperties": 1,
"properties": {
"url": {
"type": "string"
},
"iosResource": {
"type": "string"
},
"androidResource": {
"type": "string"
}
}
},
"position": {
"description": "Defines the position of watermark image on the video screen",
"enum": [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight",
"centerBottom",
"centerTop",
"rightCenter",
"leftCenter"
],
"default": "bottomRight"
},
"clickUrl": {
"description": "Defines the url to open when watermark is clicked",
"type": "string",
"default": ""
},
"target": {
"description": "Defines the target for the watermark url to open",
"type": "string",
"default": "_blank"
},
"transparency": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number",
"default": "1"
},
"scalingOption": {
"description": "Defines watermark scaling option. If 'default' is chosen, watermark is scaled to 10% of player width",
"enum": [
"none",
"width",
"height",
"default"
],
"default": "none"
},
"scalingPercentage": {
"description": "An integer number ranging from 0 to 100, scales watermark according to scalintOption parameter",
"type": "number",
"default": "0"
}
},
"example": ""watermark": {"imageResource": {"url": "assets/images/ooyala-watermark.png"} }"
},
"loadingImage": {
"description": "An object that defines the URL of a loading image on the player screen",
"type": "object",
"additionalProperties": false,
"properties": {
"imageResource": {
"description": "Specify how to obtain an image's data. Desktop will use the url. Mobile will first lookup the native resource, with fall back to the url.",
"type": "object",
"additionalProperties": false,
"minProperties": 1,
"properties": {
"url": {
"type": "string"
},
"iosResource": {
"type": "string"
},
"androidResource": {
"type": "string"
}
}
}
},
"example": ""loadingImage": {"imageResource": {"url": "assets/images/loading.png"} }"
},
"bufferingSpinnerDelay": {
"description": "The time in milliseconds that the player should wait before displaying the buffering spinner when playback stalls. Set to 0 in order to show the spinner immediately.",
"type": "number",
"minimum": 0,
"maximum": 60000
},
"accentColor": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "v4.21.0+",
"Android SDK": "v4.21.0+ Note: the toggle switch color cannot be customized"
}
}
}
},
"localization": {
"description": "Defines the string values used in the player. Languages listed in the array require a separate json file included in the bundle, named '<language>.json' e.g. 'en.json'.",
"type": "object",
"properties": {
"defaultLanguage": {
"description": "The default language of the localizable strings on the player.",
"type": "string",
"pattern": "^[a-z]{2}$",
"valid values": ""en", "es", "zh", "ja", "ko"",
"default": "en"
},
"availableLanguageFile": {
"description": "An array of languages. Defines the string values used in the player. Languages listed in the array require a separate json file included in the bundle, named '<language>.json' e.g. 'en.json'.",
"type": "array",
"items": {
"type": "object",
"pattern": "^[a-z]{2}$"
},
"default": "{"language": "en", "languageFile": "config/en.json"}, {"language": "es", "languageFile": "config/es.json"}, {"language": "zh", "languageFile": "config/zh.json"}, {"language": "ja", "languageFile": "config/ja.json"}, {"language": "ko", "languageFile": "config/ko.json"}",
"language": {
"description": "Defines the language. For this release, valid languages are English (en), Spanish (es), Simplified Chinese (zh), Japanese (ja) and Korean (ko).",
"type": "string",
"valid values": ""en" | "es" | "zh" | "ja" | "ko""
},
"languageFile": {
"description": "Path to the localized language file.",
"type": "string"
},
"androidResource": {
"description": "Path to the localized language file in android.",
"type": "string"
},
"iosResource": {
"description": "Path to the localized language file in ios.",
"type": "string"
}
}
},
"required": [
"defaultLanguage"
]
},
"languageDirections": {
"ar": "rtl",
"dv": "rtl",
"he": "rtl",
"fa": "rtl",
"ks": "rtl",
"ku": "rtl",
"pa": "rtl",
"ps": "rtl",
"sd": "rtl",
"tk": "rtl",
"ug": "rtl",
"ur": "rtl",
"yi": "rtl"
},
"responsive": {
"description": "Defines values needed for Responsive Design Rules",
"properties": {
"breakpoints": {
"description": "Widths which video player responds to target style",
"type": "object",
"items": {
"type": "object",
"pattern": "^[a-z]{2}$"
},
"size": {
"description": "Label for breakpoint style. Used for CSS className. CSS selector for target style must match this value.",
"type": "string"
},
"minWidth": {
"description": "Minimum breakpoint width",
"type": "number"
},
"maxWidth": {
"description": "Maximum breakpoint width",
"type": "number"
},
"multiplier": {
"description": "Calculates responsive values as - value * multiplier.",
"type": "number"
}
},
"aspectRatio": {
"description": "Aspect ratio of video. Used to set dimensions of responsive player skin. (height/width) * 100. For example, 16:9 aspect ratio would be (9/16) * 100 = 56.25.",
"default": "auto",
"oneOf": [
{
"type": "string",
"enum": [
"auto"
]
},
{
"type": "number",
"minimum": 0,
"maximum": 100
}
]
}
}
},
"startScreen": {
"description": "The screen displayed after an asset loads, but before playback begins.",
"type": "object",
"properties": {
"playIconStyle": {
"description": "A collection of styles that can be used by icon renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, opacity, shadowColor, shadowOffset, shadowOpacity, shadowRadius, borderColor, borderRadius, and borderStyle. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
},
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
},
"showPromo": {
"description": "Show the promo image on the start screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"promoImageSize": {
"description": "Configure how large the promo image should be when displayed. The 'small' setting will use styling out of the style sheets.",
"enum": [
"default",
"small"
],
"default": "default"
},
"showPlayButton": {
"description": "Show the play button on the start screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"playButtonPosition": {
"description": "Defines the position of the play button on the start screen.",
"enum": [
"center",
"topLeft",
"topRight",
"bottomLeft",
"bottomRight"
],
"default": "center"
},
"showTitle": {
"description": "Show the video title on the start screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"showDescription": {
"description": "Show the video description on the start screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"titleFont": {
"description": "Defines the color of the font of the video title on the start screen. The default color is white.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
}
}
},
"descriptionFont": {
"description": "Defines the font of the video description on the start screen. The default font family is ArialMT, the default size is 16, and the default color is white.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
}
}
},
"infoPanelPosition": {
"description": "Defines the position of the information panel on the start screen.",
"enum": [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight"
],
"default": "topLeft"
}
}
},
"pauseScreen": {
"description": "The screen displayed when playback is paused.",
"type": "object",
"properties": {
"pauseIconStyle": {
"description": "A collection of styles that can be used by icon renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, opacity, shadowColor, shadowOffset, shadowOpacity, shadowRadius, borderColor, borderRadius, and borderStyle. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
},
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
},
"screenToShowOnPause": {
"description": "Defines the screen to show when the player is paused.",
"enum": [
"default",
"discovery"
],
"default": "default"
},
"showPauseIcon": {
"description": "Show the pause icon on the pause screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"pauseIconPosition": {
"description": "Defines the position of the pause icon on the pause screen.",
"enum": [
"center",
"topLeft",
"topRight",
"bottomLeft",
"bottomRight"
],
"default": "center"
},
"showTitle": {
"description": "Show the video title on the pause screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"showDescription": {
"description": "Show the video description on the pause screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": true
},
"infoPanelPosition": {
"description": "Defines the position of the information panel on the pause screen.",
"enum": [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight"
],
"default": "topLeft"
}
}
},
"endScreen": {
"description": "The screen displayed after an asset has completed playing.",
"type": "object",
"properties": {
"replayIconStyle": {
"description": "The default color is white with an opacity of 1.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
},
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
},
"screenToShowOnEnd": {
"description": "Defines the screen to show when the video playback has ended.",
"type": "string",
"enum": [
"default",
"discovery"
],
"default": "discovery"
},
"showReplayButton": {
"description": "Set to true to show the replay button on the end screen. Set to false otherwise.",
"type": "boolean",
"default": "true"
},
"showTitle": {
"description": "Show the video title on the end screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": false
},
"showDescription": {
"description": "Show the video description on the end screen if set to true. Hide it if set to false.",
"type": "boolean",
"default": false
},
"infoPanelPosition": {
"description": "Defines the position of the information panel on the end screen.",
"enum": [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight"
],
"default": "topLeft"
}
}
},
"adScreen": {
"description": "The screen to show during ads playback",
"type": "object",
"properties": {
"showAdMarquee": {
"description": "Show the ad marquee during ad playback if set to true, hide it if set to false.",
"type": "boolean",
"default": "true"
},
"showAdCountDown": {
"description": "Show the ad count down during ad playback if set to true, hide it if set to false.",
"type": "boolean",
"default": "true"
},
"showControlBar": {
"description": "Show the player control bar during ad playback if set to true. Hide the control bar when a video ad is playing by setting showControlBar to false. If showControlBar is missing or set to true, the control bar will appear while an ad is playing on your player.",
"type": "boolean",
"default": "false"
}
}
},
"discoveryScreen": {
"description": "The screen showing other recommended content.",
"type": "object",
"properties": {
"panelTitle": {
"description": "Defines properties of the title panel in the Discovery screen.",
"type": "object",
"additionalProperties": false,
"required": [
"titleFont"
],
"properties": {
"titleFont": {
"description": "A collection of styles that can be used by font renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, fontFamily, weight, fontSize. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"fontFamily": {
"type": "string"
},
"fontSize": {
"oneOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"weight": {
"type": "string"
}
}
}
}
},
"contentTitle": {
"description": "The setting for Discovery content title.",
"type": "object",
"additionalProperties": false,
"required": [
"show",
"font"
],
"properties": {
"show": {
"description": "Set to true to display the video duration on the Discovery screen, set to false otherwise.",
"type": "boolean",
"default": true
},
"font": {
"description": "A collection of styles that can be used by font renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, fontFamily, weight, fontSize. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"fontFamily": {
"type": "string"
},
"fontSize": {
"oneOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"weight": {
"type": "string"
}
}
}
}
},
"showCountDownTimerOnEndScreen": {
"description": "Whether or not to show the countdown timer for autoplay.",
"type": "boolean",
"default": false
},
"countDownTime": {
"description": "How many seconds to wait before automatically playing the recommended video",
"type": "number"
}
}
},
"shareScreen": {
"description": "The social share panel setting",
"type": "object",
"properties": {
"shareContent": {
"description": "Describes which tabs should be shown on social screen (social, embed)",
"type": "array",
"default": [
"social",
"embed"
]
},
"socialContent": {
"description": "Describes which buttons should be shown on the social share tab of the share panel",
"type": "array",
"default": [
"twitter",
"facebook",
"google+",
"email"
]
},
"embed": {
"description": "The setting for embed tabs in social share screen",
"type": "object",
"properties": {
"source": {
"type": "string"
}
}
}
}
},
"moreOptionsScreen": {
"description": "The more options / overflow panel. The set of items to show comes from the 'buttons' part of the schema.",
"type": "object",
"required": [
"iconSize",
"color"
],
"additionalProperties": false,
"patternProperties": {
"brightOpacity": {
"type": "number"
},
"darkOpacity": {
"type": "number"
}
},
"properties": {
"iconSize": {
"type": "number"
},
"color": {
"description": "Any color string as supported by React / React Native.",
"type": "string"
},
"iconStyle": {
"description": "A collection of styles that can be used by icon renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, opacity, shadowColor, shadowOffset, shadowOpacity, shadowRadius, borderColor, borderRadius, and borderStyle. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
},
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
}
}
},
"closedCaptionOptions": {
"description": "Settings regarding closed captioning.",
"type": "object",
"properties": {
"defaultEnabled": {
"description": "Enabled closed captions by default if set to true, disable otherwise.",
"type": "boolean",
"default": true
},
"defaultLanguage": {
"description": "Set the default closed-caption language. This is a string of the form "en" for English, "fr" for French, etc.",
"type": "string",
"default": "en"
}
}
},
"upNext": {
"description": "The screen to show as an asset is ending, indicating what assets can follow.",
"type": "object",
"properties": {
"showUpNext": {
"description": "Optional parameter used to show the Up Next screen if set to true, or hide the screen if set to false.",
"type": "boolean",
"default": "If no value is provided for showUpNext and timeToShow, showUpNext will default to false."
},
"timeToShow": {
"description": "Optional floating-point parameter used to set the time relative to the video length to show the Up Next screen. When timeToShow is set to a value greater than 1.0, the player interprets that number as the number of seconds before the end of the video to show the Up Next screen. However, when timeToShow is less than 1.0, the player treats the decimal value as a percentage of the video length and shows the Up Next screen at that point in the video. For example, if timeToShow is set to 0.9 in a 60-second video, the Up Next screen will show at 54 seconds. If timeToShow is set to 5.0 in a 60-second video, the Up Next screen will show at 55 seconds.",
"type": "number",
"default": "If showUpNext is set to true and no value is given for timeToShow, the Up Next dialog will default to showing 10 seconds prior to the end of the video. If no value is given for showUpNext, or it is set to false, the value set in timeToShow has no effect because the Up Next screen is never shown."
}
}
},
"controlBar": {
"description": "The playback control bar. Generally contains a play-pause button, scrubber control, etc. The set of items to show comes from the 'buttons' part of the schema.",
"type": "object",
"additionalProperties": false,
"required": [
"height",
"autoHide",
"logo"
],
"properties": {
"volumeControl": {
"description": "Defines color of volume control in control bar.",
"type": "object",
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "Unsupported",
"Android SDK": "v4.21.0+"
}
}
},
"iconStyle": {
"description": "The default color is #8E8E8E with an opacity of 1.",
"type": "object",
"additionalProperties": false,
"properties": {
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
},
"height": {
"height": "Height of the control bar.",
"type": "number",
"default": 90
},
"autoHide": {
"description": "The control bar is automatically hidden during video playback when the mouse is not in the control bar area if and only if this parameter is set to true.",
"type": "boolean",
"default": true
},
"logo": {
"description": "An object that defines the content and position of the logo image on the control bar.",
"type": "object",
"additionalProperties": false,
"properties": {
"imageResource": {
"description": "Specify how to obtain an image's data. Desktop will use the url. Mobile will first lookup the native resource, with fall back to the url.",
"type": "object",
"additionalProperties": false,
"minProperties": 1,
"properties": {
"url": {
"type": "string"
},
"iosResource": {
"type": "string"
},
"androidResource": {
"type": "string"
}
}
},
"clickUrl": {
"type": "string"
},
"target": {
"type": "string"
},
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"scrubberBar": {
"additionalProperties": false,
"properties": {
"backgroundColor": {
"description": "The color of the scrubber bar background. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"bufferedColor": {
"description": "The color to indicate buffered content in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"playedColor": {
"description": "The color to indicate played content in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"scrubberHandleColor": {
"description": "The color of the draggable scrubber object in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "v4.21.0+",
"Android SDK": "v4.21.0+"
}
},
"scrubberHandleBorderColor": {
"description": "The color of the border around the scrubber handle. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "v4.21.0+",
"Android SDK": "v4.21.0+"
}
},
"thumbnailPreview": {
"description": "The color to the draggable scrubber object in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "boolean"
}
}
},
"adScrubberBar": {
"additionalProperties": false,
"properties": {
"backgroundColor": {
"description": "The color of the scrubber bar background. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"bufferedColor": {
"description": "The color to indicate buffered content in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"playedColor": {
"description": "The color to indicate played content in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"scrubberHandleColor": {
"description": "The color to the draggable scrubber object in the scrubber bar. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "v4.21.0+",
"Android SDK": "v4.21.0+"
}
},
"scrubberHandleBorderColor": {
"description": "The color of the border around the scrubber handle. Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string",
"platform support": {
"iOS SDK": "v4.21.0+",
"Android SDK": "v4.21.0+"
}
}
}
},
"tooltips": {
"description": "Configuration for the control bar items tooltips.",
"type": "object",
"properties": {
"enabled": {
"description": "Show the control bar items tooltips if set to true. Hide the control bar items tooltips if set to false. Default is false.",
"type": "boolean",
"default": "false"
}
}
},
"qualitySelection": {
"description": "Configuration for the control bar quality selection panel/popover",
"type": "object",
"properties": {
"format": {
"description": "Determine the format of the quality options. Available formats: bitrate only, resolution only, and resolution + bitrate.",
"type": "string",
"enum": [
"bitrate",
"resolution",
"resolution bitrate"
],
"default": "bitrate"
}
}
}
}
},
"live": {
"description": "Configuration for UI when it playbacks live assets.",
"type": "object",
"additionalProperties": false,
"required": [
"forceDvrDisabled"
],
"properties": {
"forceDvrDisabled": {
"descriptipon": "Force the Scrubber bar to be hidden during live streams, regardless of if DVR is available",
"type": "boolean"
}
}
},
"isVrAnimationEnabled": {
"description": "Show vrNotification or vrIcon if vrNotification or vrNotification are marked as true",
"type": "object",
"properties": {
"vrNotification": {
"description": "Vr notification should be shown",
"type": "boolean",
"default": "If no value is provided for vrNotification, vrNotification will default to true."
},
"vrIcon": {
"description": "Vr icon should be shown",
"type": "boolean",
"default": "If no value is provided for vrIcon, vrIcon will default to false."
}
}
},
"audio": {
"description": "Configuration for audio",
"type": "object",
"properties": {
"audioLanguage": {
"description": "Set the default audio language. This is a string of the form "en" for English, "fr" for French, etc.",
"type": "string",
"default": "en"
}
}
},
"animationDurations": {
"description": "Sets duration for VR animation",
"type": "object",
"vrNotification": {
"description": "Duration for VR Notification",
"type": "number",
"default": 5
},
"vrIcon": {
"description": "Duration for vrIcon",
"type": "number",
"default": 4
}
},
"buttons": {
"description": "Defines the buttons that can appear on the controlBar and/or the moreOptions panel. Desktop and Mobile platforms can be configured individually.",
"type": "object",
"additionalProperties": false,
"required": [
"desktopContent",
"mobileContent"
],
"properties": {
"desktopContent": {
"description": "Used to list the buttons for a single platform (desktop vs. mobile).",
"type": "array",
"items": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
}
},
"desktopAd": {
"description": "Used to list the buttons for a single platform (desktop vs. mobile).",
"type": "array",
"items": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
}
},
"mobileContent": {
"description": "Used to list the buttons for a single platform (desktop vs. mobile).",
"type": "array",
"items": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
}
},
"mobileAd": {
"description": "Used to list the buttons for a single platform (desktop vs. mobile).",
"type": "array",
"items": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
}
}
}
},
"icons": {
"description": "The set of all required icons, for rendering all the various buttons' states.",
"type": "object",
"patternProperties": {
"": {
"description": "Icons are renderable from fonts. Bitmaps are not supported.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"additionalProperties": false,
"properties": {
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string"
}
}
}
},
"required": [
"play",
"pause",
"volume",
"volumeOff",
"expand",
"compress",
"ellipsis",
"replay",
"share",
"cc",
"discovery",
"quality",
"setting",
"dismiss",
"toggleOff",
"toggleOn",
"left",
"right",
"audioAndCC",
"selected"
],
"example": [
""icons": {",
""play": { "fontFamilyName": "alice", "fontString": "\u0068", "fontStyleClass": "icon icon-play"},",
""pause": { "fontFamilyName": "alice", "fontString": "\u0067", "fontStyleClass": "icon icon-pause"},",
""volume": { "fontFamilyName": "alice", "fontString": "\u0061", "fontStyleClass": "icon icon-volume-desktop"},",
""volumeOff": { "fontFamilyName": "alice", "fontString": "\u0070", "fontStyleClass": "icon icon-volume-desktop"},",
""expand": { "fontFamilyName": "alice", "fontString": "\u0069", "fontStyleClass": "icon icon-resize-large"},",
""compress": { "fontFamilyName": "alice", "fontString": "\u006a", "fontStyleClass": "icon icon-resize-small"},",
""ellipsis": { "fontFamilyName": "alice", "fontString": "\u0066", "fontStyleClass": "icon icon-menu"},",
""replay": { "fontFamilyName": "alice", "fontString": "\u0063", "fontStyleClass": "icon icon-upnext-replay"},",
""share": { "fontFamilyName": "alice", "fontString": "\u006f", "fontStyleClass": "icon icon-topmenu-share"},",
""cc": { "fontFamilyName": "alice", "fontString": "\u006B", "fontStyleClass": "icon icon-topmenu-cc"},",
""discovery": { "fontFamilyName": "alice", "fontString": "\u006C", "fontStyleClass": "icon icon-topmenu-discovery"},",
""quality": { "fontFamilyName": "alice", "fontString": "\u006D", "fontStyleClass": "icon icon-topmenu-quality"},",
""setting": { "fontFamilyName": "alice", "fontString": "\u006E", "fontStyleClass": "icon icon-topmenu-settings"},",
""dismiss": { "fontFamilyName": "alice", "fontString": "\u0065", "fontStyleClass": "icon icon-close"},",
""toggleOn": { "fontFamilyName": "fontawesome", "fontString": "\uf205", "fontStyleClass": ""},",
""toggleOff": { "fontFamilyName": "fontawesome", "fontString": "\uf204", "fontStyleClass": ""},",
""left": { "fontFamilyName": "alice", "fontString": "\u0072", "fontStyleClass": "icon icon-left"},",
""right": { "fontFamilyName": "alice", "fontString": "\u0073", "fontStyleClass": "icon icon-right"},",
""learn": { "fontFamilyName": "alice", "fontString": "\u0074", "fontStyleClass": "icon icon-learn"},",
""skip": { "fontFamilyName": "alice", "fontString": "\u0075", "fontStyleClass": "icon icon-skip"}",
""audioAndCC": { "fontFamilyName": "alice", "fontString": "\u005F", "fontStyleClass": "icon icon-audio-and-cc"}",
""selected": { "fontFamilyName": "alice", "fontString": "\u0040", "fontStyleClass": "icon icon-selected"}",
"}"
],
"play": {
"description": "Set the styling for the play icon on mobile devices.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0068"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-play"
}
},
"pause": {
"description": "Set the styling for the pause icon on mobile devices.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0067"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-pause"
}
},
"volume": {
"description": "Set the styling for the volume icon on mobile devices.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0061"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-volume-desktop"
}
},
"volumeOff": {
"description": "Set the styling for the icon that appears when the volume is set to "off".",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0070"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-volume-desktop"
}
},
"expand": {
"description": "Set the styling for the expand player icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0069"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-resize-large"
}
},
"compress": {
"description": "Set the styling for the compress player icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006a"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-resize-small"
}
},
"ellipsis": {
"description": "Set the styling for the ellipsis icon that appears when there is not enough room on the control bar to display all player buttons.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0066"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-menu"
}
},
"replay": {
"description": "Set the styling for the replay icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0063"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-upnext-replay"
}
},
"share": {
"description": "Set the styling for the share icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006f"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-topmenu-share"
}
},
"cc": {
"description": "Set the styling for the closed captions icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006B"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-topmenu-cc"
}
},
"discovery": {
"description": "Set the styling for the Ooyala Discovery icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006C"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-topmenu-discovery"
}
},
"quality": {
"description": "Set the styling for the video quality icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006D"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-topmenu-quality"
}
},
"setting": {
"description": "Set the styling for the settings icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u006E"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-topmenu-settings"
}
},
"dismiss": {
"description": "Set the styling for the dismiss button.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0065"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-close"
}
},
"toggleOn": {
"description": "Set the styling for the toggle-on icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "fontawesome"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\uf205"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": ""
}
},
"toggleOff": {
"description": "Set the styling for the toggle-off icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "fontawesome"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\uf204"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": ""
}
},
"left": {
"description": "Set the styling for the left scroll icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0072"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-left"
}
},
"right": {
"description": "Set the styling for the right scroll icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0073"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-right"
}
},
"learn": {
"description": "Set the styling for the learn more icon on the ad marquee.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0074"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-learn"
}
},
"skip": {
"description": "Set the styling for the skip ad icon on the ad marquee.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0075"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-skip"
}
},
"auto": {
"description": "Set the styling for the automatic bitrate icon.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0064"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-auto"
}
},
"audioAndCC": {
"description": "Set the styling for the audio and cc icon",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u005F"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-audio-and-cc"
}
},
"selected": {
"description": "Set the styling for the selected row in list (checkmark) icon",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string",
"default": "alice"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string",
"default": "\u0040"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string",
"default": "icon icon-selected"
}
}
}
},
"definitions": {
"color": {
"description": "Any color string as supported by React / React Native.",
"type": "string"
},
"image": {
"description": "Specify how to obtain an image's data. Desktop will use the url. Mobile will first lookup the native resource, with fall back to the url.",
"type": "object",
"additionalProperties": false,
"minProperties": 1,
"properties": {
"url": {
"type": "string"
},
"iosResource": {
"type": "string"
},
"androidResource": {
"type": "string"
}
}
},
"button": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
},
"controlBarButton": {
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
"moreOptionsButton": {
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
},
"buttonNames": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"buttonArray": {
"description": "Used to list the buttons for a single platform (desktop vs. mobile).",
"type": "array",
"items": {
"type": "object",
"oneOf": [
{
"description": "Buttons that start off in the control bar and thus need to say how they react when the control bar is too narrow for them to fit.",
"type": "object",
"required": [
"name",
"location",
"whenDoesNotFit",
"minWidth"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"controlBar",
"mainView"
]
},
"whenDoesNotFit": {
"description": "Sets how the button should be dealt with when it doesn't fit in the control bar. Keep: keep the button visible in the control bar. Drop: hide it from the UI. MoveToMoreOptions: show it in the more options / overflow UI.",
"enum": [
"keep",
"drop",
"moveToMoreOptions"
]
},
"minWidth": {
"type": "number"
}
}
},
{
"description": "Buttons that only appear in the more options UI, and never leave.",
"type": "object",
"required": [
"name",
"location"
],
"properties": {
"name": {
"description": "These are the only buttons currently supported by the UI SDK.",
"additionalProperties": false,
"enum": [
"playPause",
"volume",
"live",
"timeDuration",
"flexibleSpace",
"share",
"discovery",
"closedCaption",
"quality",
"logo",
"stereoscopic",
"fullscreen",
"moreOptions",
"arrowsBlack",
"audioAndCC",
"bitrateSelector"
]
},
"location": {
"enum": [
"moreOptions"
]
}
}
}
]
}
},
"icon": {
"description": "Icons are renderable from fonts. Bitmaps are not supported.",
"type": "object",
"required": [
"fontFamilyName",
"fontString",
"fontStyleClass"
],
"additionalProperties": false,
"properties": {
"fontFamilyName": {
"description": "The name of the font family to use.",
"type": "string"
},
"fontString": {
"description": "The string used for displaying the icon. (Usually a single Unicode code point.)",
"type": "string"
},
"fontStyleClass": {
"description": "The CSS class string for displaying the icon, which only applies to HTML5 player",
"type": "string"
}
}
},
"iconStyle": {
"description": "A collection of styles that can be used by icon renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, opacity, shadowColor, shadowOffset, shadowOpacity, shadowRadius, borderColor, borderRadius, and borderStyle. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
},
"active": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"inactive": {
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"opacity": {
"description": "A floating-point number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).",
"type": "number"
}
},
"shadowColor": {
"type": "string"
},
"shadowOffset": {
"type": "object",
"properties": {
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"shadowOpacity": {
"type": "number"
},
"shadowRadius": {
"type": "number"
},
"borderColor": {
"type": "string"
},
"borderRadius": {
"type": "number"
},
"borderWidth": {
"type": "number"
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dotted",
"dashed"
]
}
}
},
"fontStyle": {
"description": "A collection of styles that can be used by font renderings throughout the UI. Any value placed in here gets directly parsed as a React stylesheet. Supported style customizations are color, fontFamily, weight, fontSize. See React stylesheets for more specifics on each field. All values are optional, and have defaults specified in the code depending on the section. See each section for default values.",
"type": "object",
"additionalProperties": false,
"properties": {
"fontFamily": {
"type": "string"
},
"fontSize": {
"oneOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
"color": {
"description": "Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).",
"type": "string"
},
"weight": {
"type": "string"
}
}
}
}
}