Class DefaultUI

<theoplayer-default-ui> - A default UI for THEOplayer.

This default UI provides a great player experience out-of-the-box, that works well on all types of devices and for all types of streams. It provides all the common playback controls for playing, seeking, changing languages and qualities. It also supports advertisements and casting.

Usage

  1. Create a <theoplayer-default-ui> element.
  2. Set its configuration attribute or property to a valid player configuration.
  3. Set its source attribute or property to a valid stream source.
  4. Optionally, customize the player using CSS custom properties and/or extra controls.

Customization

The styling can be controlled using CSS custom properties (see <theoplayer-ui>). Additional controls can be added to the top-control-bar and bottom-control-bar slots. For more extensive customizations, we recommend defining your own custom UI using a <theoplayer-ui>.

Attribute

configuration - The THEOplayer PlayerConfiguration, as a JSON string.

Attribute

source - The THEOplayer SourceDescription, as a JSON string.

Attribute

fluid - If set, the player automatically adjusts its height to fit the video's aspect ratio.

Attribute

muted - If set, the player starts out as muted. Reflects ui.player.muted.

Attribute

autoplay - If set, the player attempts to automatically start playing (if allowed).

Attribute

device-type - The device type, either "desktop", "mobile" or "tv". Can be used in CSS to show/hide certain device-specific UI controls.

Attribute

mobile - Whether the user is on a mobile device. Equivalent to device-type == "mobile".

Attribute

tv - Whether the user is on a TV device. Equivalent to device-type == "tv".

Attribute

stream-type - The stream type, either "vod", "live" or "dvr". Can be used to show/hide certain UI controls specific for livestreams, such as a <theoplayer-live-button>. If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker when the player switches between its VOD-specific and live-only controls.

Attribute

user-idle-timeout - The timeout (in seconds) between when the user stops interacting with the UI, and when the user is considered to be "idle".

Attribute

dvr-threshold - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR and its stream type to be set to "dvr".

Slot

title - A slot for the stream's title in the top control bar.

Slot

top-control-bar - A slot for extra UI controls in the top control bar.

Slot

bottom-control-bar - A slot for extra UI controls in the bottom control bar.

Slot

menu - A slot for extra menus (see <theoplayer-menu>).

Hierarchy (view full)

Constructors

constructor

Properties

_shadowRoot _ui

Accessors

autoplay configuration dvrThreshold fluid muted player source streamType userIdleTimeout observedAttributes

Methods

attributeChangedCallback connectedCallback disconnectedCallback initShadowRoot

Events

READY_EVENT

Constructors

constructor

  • new DefaultUI(configuration?): DefaultUI

  • Creates a new THEOplayer default UI.

    Parameters

    • configuration: PlayerConfiguration = {}

      The player configuration. Will be passed to the ChromelessPlayer constructor to create the underlying THEOplayer instance. Can also be set later on through the configuration property.

    Returns DefaultUI

Properties

Protected Readonly _shadowRoot

_shadowRoot: ShadowRoot

Protected Readonly _ui

_ui: UIContainer

Accessors

autoplay

  • get autoplay(): boolean

  • Whether the player should attempt to automatically start playback.

    Returns boolean

  • set autoplay(value): void

  • Parameters

    • value: boolean

    Returns void

configuration

dvrThreshold

  • get dvrThreshold(): number

  • The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR and its stream type to be set to "dvr".

    Returns number

  • set dvrThreshold(value): void

  • Parameters

    • value: number

    Returns void

fluid

  • get fluid(): boolean

  • Whether to automatically adjusts the player's height to fit the video's aspect ratio.

    Returns boolean

  • set fluid(value): void

  • Parameters

    • value: boolean

    Returns void

muted

  • get muted(): boolean

  • Whether the player's audio is muted.

    Returns boolean

  • set muted(value): void

  • Parameters

    • value: boolean

    Returns void

player

source

streamType

  • get streamType(): StreamType

  • The stream type, either "vod", "live" or "dvr".

    If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker when the player switches between its VOD-specific and live-only controls.

    Returns StreamType

  • set streamType(value): void

  • Parameters

    Returns void

userIdleTimeout

  • get userIdleTimeout(): number

  • The timeout (in seconds) between when the user stops interacting with the UI, and when the user is considered to be "idle".

    Returns number

  • set userIdleTimeout(value): void

  • Parameters

    • value: number

    Returns void

Static observedAttributes

Methods

attributeChangedCallback

  • attributeChangedCallback(attrName, oldValue, newValue): void

  • Parameters

    • attrName: string
    • oldValue: any
    • newValue: any

    Returns void

connectedCallback

disconnectedCallback

Protected initShadowRoot

Events

Static READY_EVENT

READY_EVENT: "theoplayerready" = READY_EVENT

Fired when the backing player is created, and the DefaultUI.player property is set.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc