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

tsx
        import { MediaSync } from '@vidstack/player-react';

      

Usage

The <MediaSync> 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 <MediaSync>, 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 <MediaSync> 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 <MediaSync>:

          
        

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 onVdsMediaVolumeSync event will be fired as the volume is synchronized.