usePlayerProgress
Read timeline state and perform seeking without reaching for a DOM video ref.
Read timeline state and perform seeking without reaching for a DOM video ref.
usePlayerProgress() is the preferred public hook for custom timeline UI within a VideoPlayer scope.
This hook requires a VideoPlayer scope and a scope-aware media element. The Lit <Video> wrapper does not automatically participate in the scope.
const progress = usePlayerProgress();It returns:
currentTimedurationprogressbufferedseekTo(seconds)seekBy(deltaSeconds)progress and buffered are ratios from 0 to 1.
import {VideoPlayer, usePlayerProgress} from "@rixl/media-react";
function CustomProgressControls() {
const {currentTime, duration, progress, buffered, seekBy} = usePlayerProgress();
return (
<div className="space-y-2">
<div>{`${Math.round(currentTime)}s / ${Math.round(duration)}s`}</div>
<div>{`Played: ${Math.round(progress * 100)}% | Buffered: ${Math.round(buffered * 100)}%`}</div>
<button type="button" onClick={() => seekBy(10)}>
Seek +10s
</button>
</div>
);
}
function CustomPlayer() {
return (
<VideoPlayer>
<CustomProgressControls />
{/* scope-aware media element */}
</VideoPlayer>
);
}0.useProgressBar when you are building on top of a scope-aware player.