Exclusive Playback Provider
Ensures that only one descendant audio or video element plays at a time.
Installation
npx shadcn add @limeplay/exclusive-playback-providerThis component does not require a createMediaKit feature. It coordinates
descendant native <audio> and <video> elements.
Usage
Wrap the players that should share exclusive playback:
import { AudioPlayer } from "@/components/audio-player/player"
import { ExclusivePlaybackProvider } from "@/components/limeplay/exclusive-playback-provider"
import { VideoPlayer } from "@/components/video-player/player"
const videoSource = "/video.m3u8"
const audioPlaylist = [{ id: "track-1", src: "/audio.mp3", title: "Track 1" }]
export function MediaGallery() {
return (
<ExclusivePlaybackProvider>
<VideoPlayer source={videoSource} />
<AudioPlayer source={audioPlaylist} />
</ExclusivePlaybackProvider>
)
}When a descendant media element starts playing, the provider pauses every other descendant that is currently playing.
Use separate providers to create independent playback groups.
The provider only coordinates <audio> and <video> elements rendered inside it in the same document; media in iframes or shadow roots is not affected.
Custom wrapper
The provider renders a div by default. Use asChild to merge its behavior into a single child element:
<ExclusivePlaybackProvider asChild>
<main>
<VideoPlayer source={videoSource} />
<AudioPlayer source={audioPlaylist} />
</main>
</ExclusivePlaybackProvider>API Reference
Prop
Type