Seekbar

Slider component for seeking through the video. Displays progress and allows scrubbing.

Props

Prop

Type

Examples

Basic Usage

import {
  MediaProvider,
  PlayerProvider,
  PlayerContainer,
  ShakaVideo,
  ControlsContainer,
  ControlsGroup,
  Seekbar,
} from "@shelby-protocol/player";

function VideoPlayer() {
  return (
    <MediaProvider>
      <PlayerProvider>
        <PlayerContainer>
          <ShakaVideo
            src="https://example.com/video.m3u8"
            poster="https://example.com/poster.jpg"
            className="w-full"
          />
          <ControlsContainer>
            <ControlsGroup className="px-4 w-full">
              <Seekbar />
            </ControlsGroup>
          </ControlsContainer>
        </PlayerContainer>
      </PlayerProvider>
    </MediaProvider>
  );
}

With Other Controls

import {
  MediaProvider,
  PlayerProvider,
  PlayerContainer,
  ShakaVideo,
  ControlsContainer,
  ControlsGroup,
  Seekbar,
  PlayButton,
  CurrentTimeDisplay,
} from "@shelby-protocol/player";

function VideoPlayer() {
  return (
    <MediaProvider>
      <PlayerProvider>
        <PlayerContainer>
          <ShakaVideo
            src="https://example.com/video.m3u8"
            poster="https://example.com/poster.jpg"
            className="w-full"
          />
          <ControlsContainer>
            <div className="flex-1" />
            <ControlsGroup className="px-4 w-full">
              <Seekbar />
            </ControlsGroup>
            <ControlsGroup className="p-4">
              <PlayButton />
              <CurrentTimeDisplay />
            </ControlsGroup>
          </ControlsContainer>
        </PlayerContainer>
      </PlayerProvider>
    </MediaProvider>
  );
}

Seekbar

Props

Examples

Basic Usage

With Other Controls

On this page