useProgressBar

useProgressBar({video}) is a low-level helper for custom scrubber drag handling around a raw HTMLVideoElement.

Signature

const progressBar = useProgressBar({video});

It returns:

progress
isDragging
handleDragStart(event)

Important

If you are building on top of the public Video component, prefer usePlayerProgress() — it binds to the enclosing player scope and needs no arguments.

The public Video component does not expose a DOM video ref, so useProgressBar is only practical when you already own the underlying <video> element.

Example

import {useRef} from "react";
import {useProgressBar} from "@rixl/videosdk-react";

function NativeVideoProgress() {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const {progress, isDragging, handleDragStart} = useProgressBar({video: videoRef.current});

  return (
    <div className="space-y-3">
      <video ref={videoRef} src="/example.mp4" className="w-full" />

      <div
        role="presentation"
        className="h-2 rounded bg-gray-200"
        onMouseDown={handleDragStart}
        onTouchStart={handleDragStart}
      >
        <div
          className="h-2 rounded bg-black"
          style={{width: `${progress * 100}%`}}
        />
      </div>

      <div>{isDragging ? "Dragging" : "Idle"}</div>
    </div>
  );
}

Notes

This hook does not return duration, isPlaying, or other playback state.
Use it when you need the SDK's drag handling but you already control the raw media element yourself.

Signature

Important

Example

Notes

On This Page