logo
THEOplayer
ChromelessPlayerfeaturesPlayerPlayerConfigurationPlayerEventMapPlayerListplayersplayerSuiteVersionversiontheoplayer
ABR
Ads
Content protection
Media and Text Tracks
Miscellaneous
Verizon Media
Source
Events
HESP
Network
Player

THEOplayer > ChromelessPlayer

ChromelessPlayer class

The player API.

Signature:

export declare class ChromelessPlayer implements EventDispatcher<PlayerEventMap> 

Constructors

Constructor

Description

constructor​(element: HTMLElement, configuration: PlayerConfiguration)

Constructs a new instance of the ChromelessPlayer class

Properties

Property

Type

Description

abr

ABRConfiguration

The adaptive bitrate configuration.

ads

Ads

The ads API.

analytics

Analytics

The analytics API.

audio

WebAudio

The web audio API.

audioTracks

MediaTrackList

List of audio tracks of the current source.

autoplay

boolean

Whether the player should immediately start playback after source change.

buffered

TimeRanges

Returns a TimeRanges object that represents the ranges of the media resource that the player has buffered.

canvas

Canvas

The canvas of the player.

cast

Cast

The cast API.

clip

Clip

The clip API.

currentProgramDateTime

Date | null

The current playback position of the media, as a timestamp.

currentTime

number

The current playback position of the media, in seconds.

duration

number

The duration of the media, in seconds.

element

HTMLElement

The HTML element containing the player.

ended

boolean

Whether playback of the media is ended.

error

MediaError | undefined

The last error that occurred for the current source, if any.

errorObject

THEOplayerError | undefined

The last error that occurred for the current source, if any.

hesp

HespApi

The HESP API.

imagine

Imagine

The Imagine API.

latency

LatencyManager

The latency manager for low latency live playback.

loop

boolean

Whether playback of the media is looped.

metrics

Metrics

The metrics API.

muted

boolean

Whether audio is muted.

network

Network

The network API.

paused

boolean

Whether the player is paused.

playbackRate

number

The playback rate of the media.

played

TimeRanges

Returns a TimeRanges object that represents the ranges of the media resource that the player has played.

poster

string

The poster of the current source.

preload

PreloadType

The preload setting of the player.

presentation

Presentation

The presentation API.

readyState

number

The ready state of the player, represented by a value from the following list:
- 0 (HAVE_NOTHING): The player has no information about the duration of its source.
- 1 (HAVE_METADATA): The player has information about the duration of its source.
- 2 (HAVE_CURRENT_DATA): The player has its current frame in its buffer.
- 3 (HAVE_FUTURE_DATA): The player has enough data for immediate playback.
- 4 (HAVE_ENOUGH_DATA): The player has enough data for continuous playback.

related

RelatedContent

The related content API.

seekable

TimeRanges

Returns a TimeRanges object that represents the ranges of the media resource that are seekable by the player.

seeking

boolean

Whether the player is seeking.

source

SourceDescription | undefined

The current source which describes desired playback of a media resource.

src

string | undefined

The current URL of the media resource.

textTracks

TextTracksList

List of text tracks of the current source.

textTrackStyle

TextTrackStyle

The text track style API.

uid

number

Unique ID of the player.

verizonMedia

VerizonMedia

The Verizon Media API.

videoHeight

number

The height of the active video rendition, in pixels.

videoTracks

MediaTrackList

List of video tracks of the current source.

videoWidth

number

The width of the active video rendition, in pixels.

visibility

Visibility

The visibility API.

volume

number

The volume of the audio.

vr

VR

The VR API.

yospace

Yospace

The Yospace API.

Methods

Method

Description

addEventListener​(type: TType | readonly TType[], listener: EventListener<PlayerEventMap[TType]>): void

Add the given listener for the given event type(s).

destroy​(): void

Destroy the player.

pause​(): void

Pause playback.

play​(): void

Start or resume playback.

prepareWithUserAction​(): void

Prepare the player to ChromelessPlayer.autoplay on platforms where autoplay is restricted without user action.

removeEventListener​(type: TType | readonly TType[], listener: EventListener<PlayerEventMap[TType]>): void

Remove the given listener for the given event type(s).

setSource​(sourceDescription: SourceDescription | undefined): void

Set current source which describes desired playback of a media resource.

stop​(): void

Stop playback.

Constructor Details

constructor

Constructs a new instance of the ChromelessPlayer class

Signature:

constructor(element: HTMLElement, configuration?: PlayerConfiguration);

Parameters

Parameter

Type

Description

element

HTMLElement

configuration

PlayerConfiguration

Property Details

abr

The adaptive bitrate configuration.

Signature:

readonly abr: ABRConfiguration;

ads

The ads API.

Signature:

readonly ads?: Ads;

Remarks


- Only available with the feature 'ads'.

analytics

The analytics API.

Signature:

readonly analytics?: Analytics;

audio

The web audio API.

Signature:

readonly audio?: WebAudio;

Remarks


- Only available with the feature 'webaudio'.

audioTracks

List of audio tracks of the current source.

Signature:

audioTracks: MediaTrackList;

autoplay

Whether the player should immediately start playback after source change.

Signature:

autoplay: boolean;

Remarks


- To autoplay with sound on certain platforms, ChromelessPlayer.prepareWithUserAction() must be called at least once.
- To autoplay without sound, PlayerConfiguration.mutedAutoplay must be configured.

buffered

Returns a TimeRanges object that represents the ranges of the media resource that the player has buffered.

Signature:

readonly buffered: TimeRanges;

canvas

The canvas of the player.

Signature:

readonly canvas: Canvas;

cast

The cast API.

Signature:

readonly cast?: Cast;

Remarks


- Only available with the feature 'airplay' or 'chromecast'.

clip

The clip API.

Signature:

readonly clip: Clip;

currentProgramDateTime

The current playback position of the media, as a timestamp.

Signature:

currentProgramDateTime: Date | null;

Remarks


- The relation between ChromelessPlayer.currentProgramDateTime and ChromelessPlayer.currentTime is determined by the manifest.

currentTime

The current playback position of the media, in seconds.

Signature:

currentTime: number;

duration

The duration of the media, in seconds.

Signature:

duration: number;

Remarks


- On source change, duration becomes available after ChromelessPlayer.readyState is at least 1 (HAVE_METADATA).

element

The HTML element containing the player.

Signature:

element: HTMLElement;

ended

Whether playback of the media is ended.

Signature:

ended: boolean;

Remarks


- Playback is ended when the current playback position is at the end of the media, and the player does not ChromelessPlayer.loop.

error

Warning: This API is deprecated.

use ChromelessPlayer.errorObject instead

The last error that occurred for the current source, if any.

Signature:

error: MediaError | undefined;

errorObject

The last error that occurred for the current source, if any.

Signature:

errorObject: THEOplayerError | undefined;

Remarks


- This will equal the property from the last .

hesp

The HESP API.

Signature:

readonly hesp?: HespApi;

Remarks


- Note: This API is in an experimental stage and may be subject to breaking changes.
- Only available with the feature 'hesp'.

imagine

The Imagine API.

Signature:

imagine?: Imagine;

Remarks


- Only available with the feature 'imagine'.

latency

The latency manager for low latency live playback.

Signature:

latency: LatencyManager;

Remarks


- Can currently only be used with HESP sources.

loop

Whether playback of the media is looped.

Signature:

loop: boolean;

Remarks


- When playback is looped, upon reaching the end of the media, playback immediately continues at the start of the media.
- Looped media is never ChromelessPlayer.ended.

metrics

The metrics API.

Signature:

readonly metrics: Metrics;

muted

Whether audio is muted.

Signature:

muted: boolean;

Remarks


- This affects capabilities of ChromelessPlayer.autoplay.

network

The network API.

Signature:

readonly network: Network;

paused

Whether the player is paused.

Signature:

paused: boolean;

playbackRate

The playback rate of the media.

Signature:

playbackRate: number;

Remarks


- Playback rate is represented by a number where 1 is default playback speed.
- Playback rate must be a positive number.
- It is recommended that you limit the range to between 0.5 and 4.

Example


- playbackRate = 0.70 will slow down the playback rate of the media by 30%.
- playbackRate = 1.25 will speed up the playback rate of the media by 25%.

played

Returns a TimeRanges object that represents the ranges of the media resource that the player has played.

Signature:

played: TimeRanges;

poster

The poster of the current source.

Signature:

poster: string;

Remarks


- An empty string ('') clears the current poster.
- The SourceConfiguration.poster has priority over this poster.

preload

The preload setting of the player.

Signature:

preload: PreloadType;

presentation

The presentation API.

Signature:

readonly presentation: Presentation;

readyState

The ready state of the player, represented by a value from the following list:
- 0 (HAVE_NOTHING): The player has no information about the duration of its source.
- 1 (HAVE_METADATA): The player has information about the duration of its source.
- 2 (HAVE_CURRENT_DATA): The player has its current frame in its buffer.
- 3 (HAVE_FUTURE_DATA): The player has enough data for immediate playback.
- 4 (HAVE_ENOUGH_DATA): The player has enough data for continuous playback.

Signature:

readyState: number;

Remarks


- See the HTML Media Specification

related

The related content API.

Signature:

readonly related?: RelatedContent;

Remarks


- Only available with the feature 'relatedcontent'.

seekable

Returns a TimeRanges object that represents the ranges of the media resource that are seekable by the player.

Signature:

seekable: TimeRanges;

Remarks


- On source change, seekable becomes available after ChromelessPlayer.readyState is at least 1.

seeking

Whether the player is seeking.

Signature:

seeking: boolean;

source

The current source which describes desired playback of a media resource.

Signature:

source: SourceDescription | undefined;

Remarks


- Changing source might ChromelessPlayer.preload and ChromelessPlayer.autoplay.
- Changing source will ChromelessPlayer.stop() the previous source.

src

The current URL of the media resource.

Signature:

src: string | undefined;

Remarks


- Prefer ChromelessPlayer.source instead.

textTracks

List of text tracks of the current source.

Signature:

textTracks: TextTracksList;

textTrackStyle

The text track style API.

Signature:

readonly textTrackStyle: TextTrackStyle;

uid

Unique ID of the player.

Signature:

uid: number;

verizonMedia

The Verizon Media API.

Signature:

readonly verizonMedia?: VerizonMedia;

Remarks


- Only available with the feature 'verizonmedia'.

videoHeight

The height of the active video rendition, in pixels.

Signature:

videoHeight: number;

videoTracks

List of video tracks of the current source.

Signature:

videoTracks: MediaTrackList;

videoWidth

The width of the active video rendition, in pixels.

Signature:

videoWidth: number;

visibility

The visibility API.

Signature:

readonly visibility?: Visibility;

Remarks


- Only available with the feature 'visibility'.

volume

The volume of the audio.

Signature:

volume: number;

Remarks


- Volume is represented by a floating point number between 0.0 and 1.0.

Example


- volume = 0.7 will reduce the audio volume of the media by 30%.

vr

The VR API.

Signature:

readonly vr?: VR;

Remarks


- Only available with the feature 'vr'.

yospace

The Yospace API.

Signature:

readonly yospace?: Yospace;

Remarks


- Only available with the feature 'yospace'.

Method Details

addEventListener

Add the given listener for the given event type(s).

Signature:

addEventListener<TType extends StringKeyOf<PlayerEventMap>>(type: TType | readonly TType[], listener: EventListener<PlayerEventMap[TType]>): void;

Parameters

Parameter

Type

Description

type

TType | readonly TType[]

The type of the event.

listener

EventListener<PlayerEventMap[TType]>

The callback which is executed when the event occurs.

destroy

Destroy the player.

Signature:

destroy(): void;

Remarks


- Available since v2.26.
- All resources associated with the current source are released.
- All resources associated with the player are released.
- The player can no longer be used.

pause

Pause playback.

Signature:

pause(): void;

play

Start or resume playback.

Signature:

play(): void;

prepareWithUserAction

Prepare the player to ChromelessPlayer.autoplay on platforms where autoplay is restricted without user action.

Signature:

prepareWithUserAction(): void;

Remarks


- Any invocation must happen on user action.
- Affected platforms include all mobile platforms and Safari 11+.

removeEventListener

Remove the given listener for the given event type(s).

Signature:

removeEventListener<TType extends StringKeyOf<PlayerEventMap>>(type: TType | readonly TType[], listener: EventListener<PlayerEventMap[TType]>): void;

Parameters

Parameter

Type

Description

type

TType | readonly TType[]

The type of the event.

listener

EventListener<PlayerEventMap[TType]>

The callback which will be removed.

setSource

Warning: This API is deprecated.

Superseded by ChromelessPlayer.source.

Set current source which describes desired playback of a media resource.

Signature:

setSource(sourceDescription: SourceDescription | undefined): void;

Parameters

Parameter

Type

Description

sourceDescription

SourceDescription | undefined

stop

Stop playback.

Signature:

stop(): void;

Remarks


- All resources associated with the current source are released.
- The player can be reused by setting a new ChromelessPlayer.source.

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