usePlayerTracks
Read and change player-scoped audio and subtitle track selection.
Read and change player-scoped audio and subtitle track selection.
usePlayerTracks() exposes the current audio and subtitle track selection for the current scoped player.
This hook requires a VideoPlayer scope and a scope-aware media element. The Lit <Video> wrapper does not automatically participate in the scope.
const tracks = usePlayerTracks();It returns:
audioTrackavailableAudioTrackssubtitleTrackavailableSubtitleTrackssetAudioTrack(trackIndex)setSubtitleTrack(trackIndex)import {VideoPlayer, usePlayerTracks} from "@rixl/media-react";
function CustomTrackControls() {
const {audioTrack, availableAudioTracks, subtitleTrack, availableSubtitleTracks, setAudioTrack, setSubtitleTrack} = usePlayerTracks();
return (
<div className="space-y-2">
<label>
Audio
<select value={audioTrack} onChange={(event) => setAudioTrack(Number(event.target.value))}>
{availableAudioTracks.map((track) => (
<option key={track.index} value={track.index}>
{track.label}
</option>
))}
</select>
</label>
<button type="button" onClick={() => setSubtitleTrack(subtitleTrack === -1 ? 0 : -1)}>
{subtitleTrack === -1 ? "Turn captions on" : "Turn captions off"}
</button>
<div>{`Subtitle options: ${availableSubtitleTracks.length}`}</div>
</div>
);
}
function CustomPlayer() {
return (
<VideoPlayer>
<CustomTrackControls />
{/* scope-aware media element */}
</VideoPlayer>
);
}subtitleTrack === -1 means subtitles are off.