Creates a new THEOplayer default UI.
The player configuration. Will be passed to the ChromelessPlayer constructor to create the underlying THEOplayer instance. Can also be set later on through the DefaultUI.configuration property.
Whether the player should attempt to automatically start playback.
The player configuration.
Used to create the underlying THEOplayer instance.
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".
Whether to automatically adjusts the player's height to fit the video's aspect ratio.
Whether the player's audio is muted.
The underlying THEOplayer player instance.
This is constructed automatically as soon as a valid configuration is set.
The player's current source.
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.
The timeout (in seconds) between when the user stops interacting with the UI, and when the user is considered to be "idle".
StaticobservedProtectedinitStaticREADY_Fired when the backing player is created, and the DefaultUI.player property is set.
<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
<theoplayer-default-ui>element.configurationattribute or property to a valid player configuration.sourceattribute or property to a valid stream source.Customization
The styling can be controlled using CSS custom properties (see
<theoplayer-ui>). Additional controls can be added to thetop-control-barandbottom-control-barslots. 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. Reflectsui.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 todevice-type == "mobile".Attribute
tv- Whether the user is on a TV device. Equivalent todevice-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>).