A guide on how to read, update, and subscribe to media state.
ReadingSection titled Reading
useMediaStore hooks enable you to subscribe directly to specific
media state changes, rather than listening to potentially multiple DOM events and binding it
Tracking media state via events is error prone and tedious:
Tracking media state via hooks:
You can omit the ref if you’re calling the hooks inside a player child component as the media context is available:
You can find a complete list of all media states available in the Player State Reference.
Avoiding RendersSection titled Avoiding Renders
useMediaStore hook will trigger re-renders. For some media state this
may be too expensive or unnecessary. You can subscribe to state updates directly on the player
instance to avoid triggering renders:
When inside a player child component you can get a player instance reference with
UpdatingSection titled Updating
useMediaRemote hook creates and returns a
MediaRemoteControl object. The returned
class provides a simple facade for dispatching media request events.
This can be used to request media playback to play/pause, change the current volume level, seek
to a different time position, and other actions that change media state.
The example above shows that event triggers can be provided to all methods on the
MediaRemoteControl class. Trigger events enable connecting media events back to
their origin event. This can be useful when trying to understand how a media event was triggered,
or when analyzing data such as the time difference between the request and when it was performed.
MediaRemoteControl API docs for all available methods.