Creates a new THEOplayer UI container element.
The player configuration. Will be passed to the ChromelessPlayer constructor to create the underlying THEOplayer instance. Can also be set later on through the UIContainer.configuration property.
Whether the player should attempt to automatically start playback.
Whether the player is casting to a remote receiver.
The player configuration.
Used to create the underlying THEOplayer instance.
The device type, either "desktop", "mobile" or "tv".
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 the player is ended.
Whether to automatically adjusts the player's height to fit the video's aspect ratio.
Whether the UI is in fullscreen mode.
Whether the player's audio is muted.
Whether the player is paused.
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".
StaticobservedStaticREADY_Fired when the backing player is created, and the UIContainer.player property is set.
<theoplayer-ui>- The container element for a THEOplayer UI.This element provides a basic layout structure for a general player UI, and handles the creation and management of a THEOplayer player instance for this UI.
Usage
<theoplayer-ui>element.<theoplayer-ui>. Set theirslotattribute to one of the defined slots (see below) to place them in the layout.configurationattribute or property to a valid player configuration.sourceattribute or property to a valid stream source.Customization
This element does not provide any UI elements by default, you need to add all elements as children of the
<theoplayer-ui>element. If you're looking for a simple out-of-the-box player experience instead, see<theoplayer-default-ui>.The styling can be controlled using CSS custom properties (see below).
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(readonly) - Whether the user is considered to be "idle". When the user is idle and the video is playing, all slotted UI elements will be hidden (unless they have theno-auto-hideattribute).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".Attribute
paused(readonly) - Whether the player is paused. Reflectsui.player.paused.Attribute
ended(readonly) - Whether the player is ended. Reflectsui.player.ended.Attribute
casting(readonly) - Whether the player is casting. Reflectsui.player.cast.casting.Attribute
playing-ad(readonly) - Whether the player is playing a linear ad. Reflectsui.player.ads.playing.Attribute
has-error(readonly) - Whether the player has encountered a fatal error.Attribute
has-first-play(readonly) - Whether the player has (previously) started playback for this stream. Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.Slot
(noname, default slot) - A slot for controls at the bottom of the player. Can be used for controls such as a play button (<theoplayer-play-button>) or a seek bar (<theoplayer-time-range>).Slot
top-chrome- A slot for controls at the top of the player. Can be used to display the stream's title, or for a cast button (<theoplayer-chromecast-button>).Slot
middle-chrome- A slot for controls in the middle of the player (between the top and bottom chrome).Slot
centered-chrome- A slot for controls centered on the player, on top of other controls.Slot
centered-loading- A slot for a loading indicator centered on the player, on top of other controls but behind the centered chrome.Slot
menu- A slot for extra menus (see<theoplayer-menu>).Slot
error- A slot for an error display, to show when the player encounters a fatal error (see<theoplayer-error-display>).