usePlayback
Control playback, loading state, and playback speed for the current scoped Video instance.
Control playback, loading state, and playback speed for the current scoped Video instance.
usePlayback() exposes player-scoped transport state and actions.
This hook requires a VideoPlayer scope and a scope-aware media element. The Lit <Video> wrapper does not automatically participate in the scope.
const playback = usePlayback();It returns:
pausedloadingendedhasInteractedplaybackRateplay()pause()togglePlay()setPlaybackRate(rate)pauseOthers()import {VideoPlayer, usePlayback} from "@rixl/media-react";
function CustomPlaybackControls() {
const {paused, playbackRate, togglePlay, setPlaybackRate, pauseOthers} = usePlayback();
return (
<div className="flex items-center gap-3">
<button type="button" onClick={() => void togglePlay()}>
{paused ? "Play" : "Pause"}
</button>
<button type="button" onClick={() => setPlaybackRate(1)}>
1x
</button>
<button type="button" onClick={() => setPlaybackRate(1.5)}>
1.5x
</button>
<button type="button" onClick={() => pauseOthers()}>
Pause others
</button>
<span>{playbackRate.toFixed(2)}x</span>
</div>
);
}
function CustomPlayer() {
return (
<VideoPlayer>
<CustomPlaybackControls />
{/* scope-aware media element */}
</VideoPlayer>
);
}play() and togglePlay() return promises because browser media playback can fail.pauseOthers() is player-relative: it pauses every other mounted player without pausing the current one.usePlayerProgress() for timeline reads and seeking.