useGlobalPlayerSettings
Coordinate shared playback and preference changes across multiple mounted Video instances.
Coordinate shared playback and preference changes across multiple mounted Video instances.
useGlobalPlayerSettings() is the advanced page-level hook for shared controls.
This hook fans out to every mounted player scope. The new Lit <Video> does not register with the React player scope; use it only when you also have a scope-aware media element.
const settings = useGlobalPlayerSettings();It returns shared values and fan-out actions for mounted players, including:
mutedvolumeplaybackRatepreferredQualitypreferredAudioLanguagepreferredSubtitleLanguagesetMuted(muted)setVolume(volume)setPlaybackRate(rate)setPreferredQuality(quality)setPreferredAudioLanguage(language)setPreferredSubtitleLanguage(language)pauseAll()import {VideoPlayer, useGlobalPlayerSettings} from "@rixl/media-react";
function PageLevelPlayerControls() {
const {muted, setMuted, pauseAll} = useGlobalPlayerSettings();
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<button type="button" onClick={() => setMuted(!muted)}>
{muted ? "Unmute all" : "Mute all"}
</button>
<button type="button" onClick={() => pauseAll()}>
Pause all
</button>
</div>
</div>
);
}
function App() {
return (
<VideoPlayer>
<PageLevelPlayerControls />
{/* scope-aware media elements */}
</VideoPlayer>
);
}