Media

Media Sync

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

# Import

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

      

        <script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-media-sync.js"
></script>

      

# 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:

          
1
2
3
		    

# Sync Volume

The syncVolume property will synchronize the muted and volume state between all providers that are registered with <vds-media-sync>:

          
1
2
3
		    

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.