Media
Media Sync
This component is used to keep media states such as playback and volume in sync between multiple players.
Import
Usage
The <vds-media-sync>
component manages playback and volume of multiple provider elements by ensuring they're in sync (i.e., same state).
Each provider must be a descendant of <vds-media-sync>
, so they can register with the component and be managed together:
Single Playback
The singlePlayback
property will ensure that only one media provider is playing at any given moment. All providers that are registered with <vds-media-sync>
and playing will be paused if a new provider begins to play:
Sync Volume
The syncVolume
property will synchronize the muted
and volume
state between all providers that are registered with <vds-media-sync>
:
You can save the volume level to local storage, so it persists across page refreshes by using the volumeStorageKey
property and giving it a storage key name like so:
Finally, a vds-media-volume-sync
event will be fired as the volume is synchronized.