This component is used to keep media states such as playback and volume in sync between multiple players.
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-media-sync.js" ></script>
<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:
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:
syncVolume property will synchronize the
volume state between all providers that are registered with
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:
vds-media-volume-sync event will be fired as the volume is synchronized.