Ooyala Player Skin - JSON Schema

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.

(
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"

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
description

Defines the language. For this release, valid languages are English (en), Spanish (es), Simplified Chinese (zh) and Japanese (ja).

type

string

valid values

"en" | "es" | "zh" | "ja"

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 ]
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

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

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

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

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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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 ]
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"}, } ]
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

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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ moreOptions ]
buttonNames
description

These are the only buttons currently supported by the UI SDK.

additionalProperties
false
enum
[ playPause, volume, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
location
enum
[ controlBar ]
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, timeDuration, flexibleSpace, discovery, fullscreen, stereoscopic, moreOptions, arrowsBlack, logo, share, closedCaption, bitrateSelector, quality, live ]
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

color
description

Any valid CSS color value (named colors, three-digit hex color, six-digit hex color, RGB colors).

type

string

weight
type

string

)