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

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

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

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

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

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

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

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

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

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

)