Media
Media API
This is the top-most component in the library used to group media elements and control the flow of media state.
# Import
js
import '@vidstack/player/define/vds-media.js';
cdn
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-media.js"
></script>
# Properties
Type:
MediaController
The media controller which is responsible for updating the media store and satisfying media
requests.
Type:
MediaProviderElement | undefined
The media provider element (e.g.,
vds-video) that is attached to the controller.
Type:
ScreenOrientationController
Controls the screen orientation of the current browser window.
Type:
boolean
Whether the native browser fullscreen API is available. This does not mean that the
operation is guaranteed to be successful, only that it can be attempted.
Attribute:
fullscreen-orientation
Type:
ScreenOrientationLock | undefined
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.
# Methods
# Events
Type:
StartLoadingRequestEvent
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:
EnterFullscreenRequestEvent
Detail:
MediaFullscreenRequestTarget
Fired when requesting media to enter fullscreen. The event
detail can specify the
fullscreen target, which can be the media or provider element (defaults to media).
Type:
ExitFullscreenRequestEvent
Detail:
MediaFullscreenRequestTarget
Fired when requesting media to exit fullscreen. The event
detail can specify the fullscreen
target, which can be the media or provider element (defaults to media).
Type:
PauseRequestEvent
Detail:
void
Fired when requesting media playback to temporarily stop.
Type:
SeekRequestEvent
Detail:
number
Fired when requesting a time change. In other words, moving the playhead to a new position.
Type:
SeekingRequestEvent
Detail:
number
Fired when seeking/scrubbing to a new playback position.
Type:
VolumeChangeRequestEvent
Detail:
number
Fired when requesting the media volume to be set to a new level.
Type:
ResumeUserIdleRequestEvent
Detail:
void
Fired when user idle state tracking may resume. This is typically called after requesting
the idle state to pause via
vds-pause-user-idle-request.
Type:
PauseUserIdleRequestEvent
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:
ShowPosterRequestEvent
Detail:
void
Fired when requesting the poster _should_ be rendered by the media provider element. This
should be fired if a custom poster element is _not_ being used.
Type:
HidePosterRequestEvent
Detail:
void
Fired when requesting the poster should _not_ be rendered by the media provider element. This
should be fired if a custom poster element is being used (eg:
vds-poster).
Type:
LoopRequestEvent
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 media controller that media will be looping.
# Slots
Learn more about slotsUsed to pass in components that use/manage/provide media state.
Previous
<-
YouTube
Next
Media Sync
->