null
Player
# Props
⌘ + x
Attribute:
aspect-ratio
Type:
number
The aspect ratio of the player media given as 'width/height' (e.g., 16/9).
Attribute:
key-disabled
Type:
boolean
Whether keyboard support is disabled for the media player globally. This property won't disable
standard ARIA keyboard controls for individual components when focused.
Attribute:
key-target
Type:
'document' | 'player'
The target on which to listen for keyboard events (e.g.,
keydown):
- document: the player will listen for events on the entire document. In the case that
multiple players are on the page, only the most recently active player will receive input.
- player: the player will listen for events on the player itself or one of its children
were recently interacted with.
Attribute:
key-shortcuts
Type:
MediaKeyShortcuts
Extends global media player keyboard shortcuts. The shortcuts can be specified as a
space-separated list of combinations (e.g.,
p Control+Space), see the provided doc link
for more information.
Do note, if aria-keyshortcuts is specified on a component then it will take precedence
over the respective value set here.
Attribute:
src
Type:
MediaResource | { src: MediaResource; type?: string; } | { src: MediaResource; type?: string; }[]
The URL and optionally type of the current media resource/s to be considered for playback.
Attribute:
log-level
Type:
'info' | 'silent' | 'error' | 'warn' | 'debug'
The current log level. Values in order of priority are:
silent, error, warn, info,
and debug.
Attribute:
load
Type:
'eager' | 'idle' | 'visible' | 'custom'
Indicates when the provider can begin loading media.
-
eager: media will be loaded immediately.
- idle: media will be loaded after the page has loaded and requestIdleCallback is fired.
- visible: media will delay loading until the provider has entered the viewport.
- custom: media will wait for the startLoading() method or media-start-loading event.
Attribute:
user-idle-delay
Type:
number
The amount of delay in milliseconds while media playback is progressing without user
activity to indicate an idle state.
Attribute:
fullscreen-orientation
Type:
'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary'
This will indicate the orientation to lock the screen to when in fullscreen mode and
the Screen Orientation API is available. The default is
undefined which indicates
no screen orientation change.
Attribute:
prefer-native-hls
Type:
boolean
Whether native HLS support is preferred over using
hls.js. We recommend setting this to
false to ensure a consistent and configurable experience across browsers. In addition, our
live stream support and DVR detection is much better with hls.js so choose accordingly.
This should generally only be set to true if (1) you're working with HLS streams, and (2)
you want AirPlay to work via the native Safari controls (i.e., controls attribute is
present on the <media-player> element).
Attribute:
autoplay
Type:
boolean
Whether playback should automatically begin as soon as enough media is available to do so
without interruption.
Sites which automatically play audio (or videos with an audio track) can be an unpleasant
experience for users, so it should be avoided when possible. If you must offer autoplay
functionality, you should make it opt-in (requiring a user to specifically enable it).
However, autoplay can be useful when creating media elements whose source will be set at a
later time, under user control.
Attribute:
controls
Type:
boolean
Indicates whether a user interface should be shown for controlling the resource. Set this to
false when you want to provide your own custom controls, and true if you want the current
provider to supply its own default controls. Depending on the provider, changing this prop
may cause the player to completely reset.
Attribute:
current-time
Type:
number
A
double indicating the current playback time in seconds. Defaults to 0 if the media has
not started to play and has not seeked. Setting this value seeks the media to the new
time. The value can be set to a minimum of 0 and maximum of the total length of the
media (indicated by the duration prop).
Attribute:
loop
Type:
boolean
Whether media should automatically start playing from the beginning (replay) every time
it ends.
Attribute:
paused
Type:
boolean
Whether playback should be paused. Defaults to
true if no media has loaded or playback has
not started. Setting this to false will begin/resume playback.
Attribute:
playsinline
Type:
boolean
Whether the video is to be played "inline", that is within the element's playback area. Note
that setting this to
false does not imply that the video will always be played in fullscreen.
Depending on the provider, changing this prop may cause the player to completely reset.
Attribute:
poster
Type:
string
The URL of the current poster. Defaults to
'' if no media/poster has been given or
loaded.
Attribute:
preload
Type:
'none' | 'metadata' | 'auto'
Configures the preload setting of the underlying media provider once it can load (see
loading property).
The preload attribute provides a hint to the browser about what the author thinks will
lead to the best user experience with regards to what content is loaded before the video is
played. The recommended default is metadata.
Attribute:
view-type
Type:
'unknown' | 'audio' | 'video'
The type of player view that should be used (i.e., audio or video). By default this is set
to
video.
Attribute:
volume
Type:
number
An
int between 0 (silent) and 1 (loudest) indicating the audio volume. Defaults to 1.
Attribute:
stream-type
Type:
'unknown' | 'on-demand' | 'live' | 'live:dvr' | 'll-live' | 'll-live:dvr'
The current media stream type. This value helps determine what type of UI should be
displayed and whether seeking operations are permitted during live streams. If seeking
is permitted, set this value to
live:dvr or ll-live:dvr.
Attribute:
live-edge-tolerance
Type:
number
The number of seconds that
currentTime can be behind liveEdgeStart and still be considered
at the edge. The default value is 10, meaning the user can be up to 10 seconds behind the
live edge start and still be considered live.
Attribute:
min-live-dvrwindow
Type:
number
The minimum seekable length in seconds before seeking operations are permitted.
# Events
⌘ + e
Type:
MediaPlayerConnectEvent
Detail:
MediaPlayerElement
Fired when the player element
<media-player> connects to the DOM.
Type:
MediaAutoplayChangeEvent
Detail:
boolean
Fired when the
autoplay property has changed value.
Type:
MediaAutoplayFailEvent
Detail:
{ muted: boolean; error: Error; }
Fired when an autoplay attempt has failed. The event detail contains the error that
had occurred on the last autoplay attempt which caused it to fail.
Type:
MediaCanLoadEvent
Detail:
void
Fired when the provider can begin loading media. This depends on the type of
loading
that has been configured. The eager strategy will be immediate, and lazy once the provider
has entered the viewport.
Type:
MediaCanPlayThroughEvent
Detail:
MediaCanPlayDetail
Fired when the user agent can play the media, and estimates that **enough** data has been
loaded to play the media up to its end without having to stop for further buffering of content.
Type:
MediaCanPlayEvent
Detail:
MediaCanPlayDetail
Fired when the user agent can play the media, but estimates that **not enough** data has been
loaded to play the media up to its end without having to stop for further buffering of content.
Type:
MediaControlsChangeEvent
Detail:
boolean
Fired when the
controls property has changed value.
Type:
MediaFullscreenChangeEvent
Detail:
boolean
Fired when media enters/exits fullscreen. The event detail is a
boolean indicating
if fullscreen was entered (true) or exited (false).
Type:
MediaFullscreenErrorEvent
Detail:
unknown
Fired when an error occurs either entering or exiting fullscreen. This will generally occur
if fullscreen is not supported or the user has not interacted with the page yet.
Type:
MediaLiveChangeEvent
Detail:
boolean
Fired when the
live state changes. The event detail indicates whether the current stream
is live or not.
Type:
MediaLiveEdgeChangeEvent
Detail:
boolean
Fired when the
liveEdge state changes. The event detail indicates whether the user is viewing
at the live edge or not.
Type:
MediaLoadedDataEvent
Detail:
void
Fired when the frame at the current playback position of the media has finished loading; often
the first frame.
Type:
MediaLoopChangeEvent
Detail:
boolean
Fired when the
loop property has changed value.
Type:
MediaTypeChangeEvent
Detail:
'unknown' | 'audio' | 'video'
Fired when the
media property changes value.
Type:
ScreenOrientationChangeEvent
Detail:
ScreenOrientationChangeEventDetail
Fired when the current screen orientation changes.
Type:
MediaPlayFailEvent
Detail:
Error
Fired when an attempt to start media playback results in an error.
Type:
MediaPlaysinlineChangeEvent
Detail:
boolean
Fired when the
playsinline property has changed value.
Type:
MediaPosterChangeEvent
Detail:
string
Fired when the
currentPoster property has changed value.
Type:
MediaProviderChangeEvent
Detail:
MediaProvider
Fired when the new media provider has been selected. This will be
null if no provider is
able to play one of the current sources.
This event is ideal for initially configuring any provider-specific settings.
Type:
MediaProviderLoaderChangeEvent
Detail:
MediaProviderLoader<MediaProvider>
Fired when the new media provider loader has been selected and rendered. This will be
null if
no loader is able to play one of the current sources.
Type:
MediaProviderSetupEvent
Detail:
MediaProvider
Fired immediately after the provider has been set up. Do not try and configure the provider
here as it'll be too late - prefer the
provider-change event.
Type:
MediaSourceChangeEvent
Detail:
{ src: MediaResource; type: string; }
Fired when the
source property has changed value.
Type:
MediaSourcesChangeEvent
Detail:
MediaSrc[]
Fired when the current media sources has changed.
Type:
MediaTimeUpdateEvent
Detail:
{ currentTime: number; played: TimeRanges; }
Fired when the
currentTime property value changes due to media playback or the
user seeking.
Type:
MediaStreamTypeChangeEvent
Detail:
'unknown' | 'on-demand' | 'live' | 'live:dvr' | 'll-live' | 'll-live:dvr'
Fired when the
streamType property changes value. The event detail contains the type of
stream (e.g., on-demand, live, live:dvr, etc.).
Type:
MediaViewTypeChangeEvent
Detail:
'unknown' | 'audio' | 'video'
Fired when the
viewType property changes value. This will generally fire when the
new provider has mounted and determined what type of player view is appropriate given
the type of media it can play.
Type:
MediaVolumeChangeEvent
Detail:
MediaVolumeChange
Fired when the
volume or muted properties change value.
Type:
MediaAbortEvent
Detail:
void
Fired when the resource was not fully loaded, but not as the result of an error.
Type:
MediaAutoplayEvent
Detail:
{ muted: boolean; }
Fired when an autoplay attempt has successfully been made (ie: media playback has automatically
started). The event detail whether media is
muted before any attempts are made.
Type:
MediaDestroyEvent
Detail:
void
Fired when the player is manually destroyed by calling the
destroy() method.
Type:
MediaEndEvent
Detail:
void
Fired each time media playback has reached the end. This is fired even if the
loop property is true, which is generally when you'd reach for this event over the
MediaEndedEvent if you want to be notified of media looping.
Type:
MediaEndedEvent
Detail:
void
Fired when playback or streaming has stopped because the end of the media was reached or
because no further data is available. This is not fired if playback will start from the
beginning again due to the
loop property being true (see MediaReplayEvent
and MediaEndEvent).
Type:
MediaErrorEvent
Detail:
MediaErrorDetail
Fired when media loading or playback has encountered any issues (for example, a network
connectivity problem). The event detail contains a potential message containing more
information about the error (empty string if nothing available), and a code that identifies
the general type of error that occurred.
Type:
MediaPauseEvent
Detail:
void
Fired when a request to
pause an activity is handled and the activity has entered its
paused state, most commonly after the media has been paused through a call to the
pause() method.
Type:
MediaPlayEvent
Detail:
void
Fired when the
paused property is changed from true to false, as a result of the play()
method, or the autoplay attribute.
Type:
MediaPlayingEvent
Detail:
void
Fired when playback is ready to start after having been paused or delayed due to lack of data.
Type:
MediaProgressEvent
Detail:
{ buffered: TimeRanges; seekable: TimeRanges; }
Fired periodically as the browser loads a resource.
Type:
MediaReplayEvent
Detail:
void
Fired when media playback starts again after being in an
ended state. This is fired
when the loop property is true and media loops, whereas the play event is not.
Type:
MediaSeekedEvent
Detail:
number
Fired when a seek operation completed, the current playback position has changed, and the
seeking property is changed to false.
Type:
MediaSeekingEvent
Detail:
number
Fired when a seek operation starts, meaning the seeking property has changed to
true and the
media is seeking to a new position.
Type:
MediaStalledEvent
Detail:
void
Fired when the user agent is trying to fetch media data, but data is unexpectedly not
forthcoming.
Type:
MediaStartedEvent
Detail:
void
Fired when media playback has just started, in other words the at the moment the following
happens:
currentTime > 0.
Type:
MediaWaitingEvent
Detail:
void
Fired when playback has stopped because of a temporary lack of data.
Type:
MediaStartLoadingRequestEvent
Detail:
void
Fired when requesting media to begin loading. This will only take effect if the
loading
strategy on the provider is set to custom.
Type:
MediaEnterFullscreenRequestEvent
Detail:
'prefer-media' | 'media' | 'provider'
Fired when requesting media to enter fullscreen. The event
detail can specify the
fullscreen target, which can be the media or provider (defaults to prefer-media).
Type:
MediaExitFullscreenRequestEvent
Detail:
'prefer-media' | 'media' | 'provider'
Fired when requesting media to exit fullscreen. The event
detail can specify the fullscreen
target, which can be the media or provider (defaults to prefer-media).
Type:
MediaLiveEdgeRequestEvent
Detail:
void
Fired when requesting media to seek to the live edge (i.e., set the current time to the current
live time).
Type:
MediaPlayRequestEvent
Detail:
void
Fired when requesting media playback to begin/resume.
Type:
MediaPauseRequestEvent
Detail:
void
Fired when requesting media playback to temporarily stop.
Type:
MediaSeekRequestEvent
Detail:
number
Fired when requesting a time change. In other words, moving the playhead to a new position.
Type:
MediaSeekingRequestEvent
Detail:
number
Fired when seeking/scrubbing to a new playback position.
Type:
MediaVolumeChangeRequestEvent
Detail:
number
Fired when requesting the media volume to be set to a new level.
Type:
MediaResumeUserIdleRequestEvent
Detail:
void
Fired when user idle state tracking may resume. This is typically called after requesting
the idle state to pause via
media-pause-user-idle-request.
Type:
MediaPauseUserIdleRequestEvent
Detail:
void
Fired when user idle state tracking should pause. This is typically used when a control
is being actively interacted with, and we don't want the
idle state changing until
the interaction is complete (eg: scrubbing, or settings is open).
Type:
MediaShowPosterRequestEvent
Detail:
void
Fired when requesting the poster _should_ be rendered by the media provider. This should be
fired if a custom poster is _not_ being used.
Type:
MediaHidePosterRequestEvent
Detail:
void
Fired when requesting the poster should _not_ be rendered by the media provider. This
should be fired if a custom poster element is being used (e.g.,
media-poster).
Type:
MediaLoopRequestEvent
Detail:
void
Internal event that is fired by a media provider when requesting media playback to restart after
reaching the end. This event also helps notify the player that media will be looping.
Type:
HLSLibLoadStartEvent
Detail:
void
Fired when the browser begins downloading the
hls.js library.
Type:
HLSLibLoadErrorEvent
Detail:
Error
Fired when the
hls.js library fails during the download process.
Type:
HLSInstanceEvent
Detail:
Hls
Fired when the
hls.js instance is built. This will not fire if the browser does not
support hls.js.
Type:
HLSUnsupportedEvent
Detail:
void
Fired when the browser doesn't support HLS natively, _and_
hls.js doesn't support
this environment either, most likely due to missing Media Extensions or video codecs.
Type:
HLSMediaAttachingEvent
Detail:
MediaAttachingData
Fired before
MediaSource begins attaching to the media element.
Type:
HLSMediaAttachedEvent
Detail:
MediaAttachedData
Fired when
MediaSource has been successfully attached to the media element.
Type:
HLSMediaDetachingEvent
Detail:
void
Fired before detaching
MediaSource from the media element.
Type:
HLSMediaDetachedEvent
Detail:
void
Fired when
MediaSource has been detached from media element.
Type:
HLSBufferCodecsEvent
Detail:
BufferCodecsData
Fired when we know about the codecs that we need buffers for to push into.
Type:
HLSBufferCreatedEvent
Detail:
BufferCreatedData
Fired when
SourceBuffer's have been created.
Type:
HLSBufferAppendingEvent
Detail:
BufferAppendingData
Fired when we begin appending a media segment to the buffer.
Type:
HLSBufferAppendedEvent
Detail:
BufferAppendedData
Fired when we are done with appending a media segment to the buffer.
Type:
HLSBufferEosEvent
Detail:
BufferEOSData
Fired when the stream is finished and we want to notify the media buffer that there will be no
more data.
Type:
HLSBufferFlushingEvent
Detail:
BufferFlushingData
Fired when the media buffer should be flushed.
Type:
HLSBufferFlushedEvent
Detail:
BufferFlushedData
Fired when the media buffer has been flushed.
Type:
HLSManifestLoadingEvent
Detail:
ManifestLoadingData
Fired to signal that manifest loading is starting.
Type:
HLSManifestLoadedEvent
Detail:
ManifestLoadedData
Fired after the manifest has been loaded.
Type:
HLSManifestParsedEvent
Detail:
ManifestParsedData
Fired after manifest has been parsed.
Type:
HLSLevelSwitchingEvent
Detail:
LevelSwitchingData
Fired when a level switch is requested.
Type:
HLSLevelSwitchedEvent
Detail:
LevelSwitchedData
Fired when a level switch is effective.
Type:
HLSLevelLoadingEvent
Detail:
LevelLoadingData
Fired when a level playlist loading starts.
Type:
HLSLevelLoadedEvent
Detail:
LevelLoadedData
Fired when a level playlist loading finishes.
Type:
HLSLevelUpdatedEvent
Detail:
LevelUpdatedData
Fired when a level's details have been updated based on previous details, after it has been
loaded.
Type:
HLSLevelPtsUpdatedEvent
Detail:
LevelPTSUpdatedData
Fired when a level's PTS information has been updated after parsing a fragment.
Type:
HLSLevelsUpdatedEvent
Detail:
LevelsUpdatedData
Fired when a level is removed after calling
removeLevel().
Type:
HLSAudioTracksUpdatedEvent
Detail:
AudioTracksUpdatedData
Fired to notify that the audio track list has been updated.
Type:
HLSAudioTrackSwitchingEvent
Detail:
AudioTrackSwitchingData
Fired when an audio track switching is requested.
Type:
HLSAudioTrackSwitchedEvent
Detail:
AudioTrackSwitchedData
Fired when an audio track switch actually occurs.
Type:
HLSAudioTrackLoadingEvent
Detail:
TrackLoadingData
Fired when loading an audio track starts.
Type:
HLSAudioTrackLoadedEvent
Detail:
AudioTrackLoadedData
Fired when loading an audio track finishes.
Type:
HLSSubtitleTracksUpdatedEvent
Detail:
SubtitleTracksUpdatedData
Fired to notify that the subtitle track list has been updated.
Type:
HLSSubtitleTracksClearedEvent
Detail:
void
Fired to notify that subtitle tracks were cleared as a result of stopping the media.
Type:
HLSSubtitleTrackSwitchEvent
Detail:
SubtitleTrackSwitchData
Fired when a subtitle track switch occurs.
Type:
HLSSubtitleTrackLoadingEvent
Detail:
TrackLoadingData
Fired when loading a subtitle track starts.
Type:
HLSSubtitleTrackLoadedEvent
Detail:
SubtitleTrackLoadedData
Fired when loading a subtitle track finishes.
Type:
HLSSubtitleFragProcessedEvent
Detail:
SubtitleFragProcessedData
Fired when a subtitle fragment has been processed.
Type:
HLSCuesParsedEvent
Detail:
CuesParsedData
Fired when a set of
VTTCue's to be managed externally has been parsed.
Type:
HLSNonNativeTextTracksFoundEvent
Detail:
NonNativeTextTracksData
Fired when a text track to be managed externally is found.
Type:
HLSInitPtsFoundEvent
Detail:
InitPTSFoundData
Fired when the first timestamp is found.
Type:
HLSFragLoadEmergencyAbortedEvent
Detail:
FragLoadEmergencyAbortedData
Fired when fragment loading is aborted for emergency switch down.
Type:
HLSFragDecryptedEvent
Detail:
FragDecryptedData
Fired when a fragment has finished decrypting.
Type:
HLSFragParsingInitSegmentEvent
Detail:
FragParsingInitSegmentData
Fired when
InitSegment has been extracted from a fragment.
Type:
HLSFragParsingUserdataEvent
Detail:
FragParsingUserdataData
Fired when parsing sei text is completed.
Type:
HLSFragParsingMetadataEvent
Detail:
FragParsingMetadataData
Fired when parsing id3 is completed.
Type:
HLSFragBufferedDataEvent
Detail:
FragBufferedData
Fired when fragment remuxed MP4 boxes have all been appended into
SourceBuffer.
Type:
HLSFragChangedEvent
Detail:
FragChangedData
Fired when fragment matching with current media position is changing.
Type:
HLSFpsDropLevelCappingEvent
Detail:
FPSDropLevelCappingData
Fired when FPS drop triggers auto level capping.
Type:
HLSErrorEvent
Detail:
ErrorData
Fired when an error has occurred during loading or playback.
Type:
HLSDestroyingEvent
Detail:
void
Fired when the
hls.js instance is being destroyed. Different from hls-media-detached as
one could want to detach, and reattach media to the hls.js instance to handle mid-rolls.
Type:
HLSBackBufferReachedEvent
Detail:
BackBufferData
Fired when the back buffer is reached as defined by the
backBufferLength config option.
# Slots
Learn more about slotsUsed to pass in media components.
# CSS Vars
Learn more about cssVarsType:
number
The minimum height of the player when an aspect ratio is applied.
Type:
number
The maximum height of the player when an aspect ratio is applied.
Type:
number
The current aspect ratio of the player media.
Type:
number
The latest time in seconds for which media has been buffered (i.e., downloaded by the
browser).
Type:
number
The current playback time in seconds (0 -> duration).
Type:
number
The total length of media in seconds.
# Instance Props
⌘ + i
Type:
boolean
Whether keyboard support is disabled for the media player globally. This property won't disable
standard ARIA keyboard controls for individual components when focused.
Type:
'document' | 'player'
The target on which to listen for keyboard events (e.g.,
keydown):
- document: the player will listen for events on the entire document. In the case that
multiple players are on the page, only the most recently active player will receive input.
- player: the player will listen for events on the player itself or one of its children
were recently interacted with.
Type:
MediaKeyShortcuts
Extends global media player keyboard shortcuts. The shortcuts can be specified as a
space-separated list of combinations (e.g.,
p Control+Space), see the provided doc link
for more information.
Do note, if aria-keyshortcuts is specified on a component then it will take precedence
over the respective value set here.
Type:
MediaResource | { src: MediaResource; type?: string; } | { src: MediaResource; type?: string; }[]
The URL and optionally type of the current media resource/s to be considered for playback.
Type:
'info' | 'silent' | 'error' | 'warn' | 'debug'
The current log level. Values in order of priority are:
silent, error, warn, info,
and debug.
Type:
'eager' | 'idle' | 'visible' | 'custom'
Indicates when the provider can begin loading media.
-
eager: media will be loaded immediately.
- idle: media will be loaded after the page has loaded and requestIdleCallback is fired.
- visible: media will delay loading until the provider has entered the viewport.
- custom: media will wait for the startLoading() method or media-start-loading event.
Type:
number
The amount of delay in milliseconds while media playback is progressing without user
activity to indicate an idle state.
Type:
'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary'
This will indicate the orientation to lock the screen to when in fullscreen mode and
the Screen Orientation API is available. The default is
undefined which indicates
no screen orientation change.
Type:
boolean
Whether native HLS support is preferred over using
hls.js. We recommend setting this to
false to ensure a consistent and configurable experience across browsers. In addition, our
live stream support and DVR detection is much better with hls.js so choose accordingly.
This should generally only be set to true if (1) you're working with HLS streams, and (2)
you want AirPlay to work via the native Safari controls (i.e., controls attribute is
present on the <media-player> element).
Type:
boolean
Whether playback should automatically begin as soon as enough media is available to do so
without interruption.
Sites which automatically play audio (or videos with an audio track) can be an unpleasant
experience for users, so it should be avoided when possible. If you must offer autoplay
functionality, you should make it opt-in (requiring a user to specifically enable it).
However, autoplay can be useful when creating media elements whose source will be set at a
later time, under user control.
Type:
boolean
Indicates whether a user interface should be shown for controlling the resource. Set this to
false when you want to provide your own custom controls, and true if you want the current
provider to supply its own default controls. Depending on the provider, changing this prop
may cause the player to completely reset.
Type:
number
A
double indicating the current playback time in seconds. Defaults to 0 if the media has
not started to play and has not seeked. Setting this value seeks the media to the new
time. The value can be set to a minimum of 0 and maximum of the total length of the
media (indicated by the duration prop).
Type:
boolean
Whether media should automatically start playing from the beginning (replay) every time
it ends.
Type:
boolean
Whether playback should be paused. Defaults to
true if no media has loaded or playback has
not started. Setting this to false will begin/resume playback.
Type:
boolean
Whether the video is to be played "inline", that is within the element's playback area. Note
that setting this to
false does not imply that the video will always be played in fullscreen.
Depending on the provider, changing this prop may cause the player to completely reset.
Type:
string
The URL of the current poster. Defaults to
'' if no media/poster has been given or
loaded.
Type:
'none' | 'metadata' | 'auto'
Configures the preload setting of the underlying media provider once it can load (see
loading property).
The preload attribute provides a hint to the browser about what the author thinks will
lead to the best user experience with regards to what content is loaded before the video is
played. The recommended default is metadata.
Type:
'unknown' | 'audio' | 'video'
The type of player view that should be used (i.e., audio or video). By default this is set
to
video.
Type:
number
An
int between 0 (silent) and 1 (loudest) indicating the audio volume. Defaults to 1.
Type:
'unknown' | 'on-demand' | 'live' | 'live:dvr' | 'll-live' | 'll-live:dvr'
The current media stream type. This value helps determine what type of UI should be
displayed and whether seeking operations are permitted during live streams. If seeking
is permitted, set this value to
live:dvr or ll-live:dvr.
Type:
number
The number of seconds that
currentTime can be behind liveEdgeStart and still be considered
at the edge. The default value is 10, meaning the user can be up to 10 seconds behind the
live edge start and still be considered live.
Type:
number
The minimum seekable length in seconds before seeking operations are permitted.
Type:
MediaUser
Media user settings which currently supports configuring user idling behavior.
Type:
({ type: 'audio'; } & AudioProvider) | ({ type: 'video'; } & VideoProvider) | ({ type: 'hls'; } & HLSProvider)
The current media provider.
Type:
ScreenOrientationAdapter
Controls the screen orientation of the current browser window and dispatches orientation
change events on this element.
Type:
{ readonly autoplay: boolean; readonly autoplayError: { muted: boolean; error: Error; }; readonly buffered: TimeRanges; readonly bufferedStart: number; readonly bufferedEnd: number; readonly duration: number; readonly canFullscreen: boolean; readonly canLoad: boolean; readonly canPlay: boolean; readonly canSeek: boolean; readonly controls: boolean; readonly poster: string; readonly currentTime: number; readonly ended: boolean; readonly error: MediaErrorDetail; readonly fullscreen: boolean; readonly userIdle: boolean; readonly userBehindLiveEdge: boolean; readonly loop: boolean; readonly logLevel: LogLevel; readonly live: boolean; readonly liveEdgeTolerance: number; readonly minLiveDVRWindow: number; readonly liveEdge: boolean; readonly liveEdgeStart: number; readonly liveEdgeWindow: number; readonly mediaType: MediaType; readonly muted: boolean; readonly paused: boolean; readonly played: TimeRanges; readonly playing: boolean; readonly playsinline: boolean; readonly preload: 'none' | 'metadata' | 'auto'; readonly seekable: TimeRanges; readonly seekableStart: number; readonly seekableEnd: number; readonly seekableWindow: number; readonly seeking: boolean; readonly sources: MediaSrc[]; readonly source: MediaSrc; readonly currentSrc: MediaSrc; readonly started: boolean; readonly streamType: MediaStreamType; readonly viewType: MediaViewType; readonly volume: number; readonly waiting: boolean; readonly attemptingAutoplay: boolean; readonly canLoadPoster: boolean; readonly providedViewType: MediaViewType; readonly providedStreamType: MediaStreamType; readonly inferredStreamType: MediaStreamType; readonly liveSyncPosition: number; }
This object contains all current media state (e.g.,
paused, playing, etc.).
Type:
MediaSubscribe
Enables subscribing to live updates of individually selected media state.
# Instance Methods
Type:
() => Promise<void>
Begins/resumes playback of the media. If this method is called programmatically before the
user has interacted with the player, the promise may be rejected subject to the browser's
autoplay policies. This method will throw if called before media is ready for playback.
Type:
() => Promise<void>
Pauses playback of the media. This will throw if called before media is ready for playback.
Type:
(target?: MediaFullscreenRequestTarget) => Promise<void>
Attempts to display this element in fullscreen. The promise will resolve if successful, and
reject if not. This will throw if any fullscreen API is _not_ currently available.
Type:
(target?: MediaFullscreenRequestTarget) => Promise<void>
Attempts to display this element inline by exiting fullscreen. This will throw if any
fullscreen API is _not_ currently available.
Type:
() => void
Sets the current time to the live edge (i.e.,
duration). This is a no-op for non-live
streams and will throw if called before media is ready for playback.
Type:
() => void
Called when media can begin loading. Calling this method will trigger the initial provider
loading process. Calling it more than once has no effect.
Next
Installation
->