usePlayback

usePlayback() exposes player-scoped transport state and actions.

Signature

const playback = usePlayback();

It returns:

paused
loading
ended
hasInteracted
playbackRate
play()
pause()
togglePlay()
setPlaybackRate(rate)
pauseOthers()

Example

import {Video, usePlayback} from "@rixl/videosdk-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 (
    <Video id="your-video-id" theme="hideUI" analytics={false}>
      <CustomPlaybackControls />
    </Video>
  );
}

Notes

play() and togglePlay() return promises because browser media playback can fail.
Playback rate is player-scoped and clamped by the SDK.
pauseOthers() is player-relative: it pauses every other mounted player without pausing the current one.
Use this hook for transport controls. Use usePlayerProgress() for timeline reads and seeking.

Signature

Example

Notes

On This Page