logo
THEOplayer
ABR
Miscellaneous
Ads
Caching
Content protection
Analytics
Casting
Media and Text Tracks
Source
Verizon Media
Events
HESP
SSAI
Network
Presentation
Player
UI
UILanguageUIConfigurationUIPlayerConfigurationUIRelatedContentUIRelatedContentEventMapvideojsvideojs.Player
VR

THEOplayer > UIConfiguration

UIConfiguration interface

Describes the UI configuration of the player.

Signature:

export interface UIConfiguration 

Properties

Property

Type

Description

fluid (optional)

boolean

Whether the UI of the player is responsive.

height (optional)

number | string

The height of the player.

language (optional)

string | UILanguage

The language which is used for localization.

languages (optional)

Record<string, UILanguage>

A record used to localize to multiple languages. Each entry contains a language code with associated language map.

width (optional)

number | string

The width of the player.

Property Details

fluid

Whether the UI of the player is responsive.

Signature:

fluid?: boolean;

height

The height of the player.

Signature:

height?: number | string;

Remarks

Possible formats
- A number as the amount of pixels.
- A percentage string (XX%).

language

The language which is used for localization.

Signature:

language?: string | UILanguage;

Remarks


- This can be a language map.
- Otherwise it can be a language code which is the key to a language map in UIConfiguration.languages.

Example 1

Localize statically to one language.

ui: {
  language: {
    "Play": "Reproducir",
    "Pause": "Pausa",
    "Current Time": "Tiempo actual",
    // [...]
  }
}

Example 2

Localize dynamically to one of multiple languages.

ui: {
  language: 'es',
  languages: {
    "es": {
      "Play": "Reproducir",
      "Pause": "Pausa",
      "Current Time": "Tiempo actual",
      // [...]
    },
    "fr": {
      // [...]
    }
  }
}

languages

A record used to localize to multiple languages. Each entry contains a language code with associated language map.

Signature:

languages?: Record<string, UILanguage>;

width

The width of the player.

Signature:

width?: number | string;

Remarks

Possible formats
- A number as the amount of pixels.
- A percentage string (XX%).

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
Singapore
Barcelona