1. Media
  2. Media Sync

Media

Media Sync

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

Import

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

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

          
        

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.