API
Fullscreen
In this section, we'll look at how to request and track fullscreen changes with Vidstack Player.
Methods
You can request to enter or exit fullscreen on the <media-player>
element like so:
Target
By default, calling the enterFullscreen()
method will first attempt to use the Fullscreen API so the custom media UI is displayed, otherwise it'll fallback to the current media provider.
You can specify that you only want to display the provider in fullscreen and not the entire media by specifying the fullscreen target like so:
By setting target
to provider
, the controller will only request fullscreen on the media provider, meaning your custom UI will not be displayed when in fullscreen.
Media Store
The following fullscreen properties are available on the media store:
canFullscreen
: Whether fullscreen API is currently available.fullscreen
: Whether the player is currently in fullscreen mode.
Media Remote
The media remote provides methods for dispatching media-enter-fullscreen-request
and media-exit-fullscreen-request
request events like so:
Styling
The following media attributes are available for styling based on the current fullscreen state:
Events
The following events are available for detecting fullscreen changes or errors:
Screen Orientation
The player uses the native Screen Orientation API to lock the document's orientation. You can specify the preferred fullscreen orientation like so:
This will lock the screen orientation as specified by fullscreen-orientation
while the media enters fullscreen, and it will be unlocked while exiting. Read more about the available screen orientation types.
Events
The following events are available for detecting screen orientation changes: