1. Media
  2. Media Sync


Media Sync

This component is used to keep media states such as playback and volume in sync between multiple players.


        import '@vidstack/player/define/vds-media-sync.js';




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.