Skip to main content
SeekButton seeks the media by a configurable number of seconds. Positive values seek forward, negative values seek backward. The seek is clamped to media bounds (0 to duration).
Requires the time feature to be registered with the player.

​
Import

import { SeekButton } from '@videojs/react';

​
Basic Usage

import { SeekButton } from '@videojs/react';

function PlayerControls() {
  return (
    <>
      <SeekButton seconds={-10}>-10s</SeekButton>
      <SeekButton seconds={30}>+30s</SeekButton>
    </>
  );
}

​
Custom Render

import { RewindIcon, FastForwardIcon } from './icons';
import { SeekButton } from '@videojs/react';

function PlayerControls() {
  return (
    <>
      <SeekButton
        seconds={-10}
        render={(props, state) => (
          <button {...props}>
            <RewindIcon /> {Math.abs(state.seconds)}s
          </button>
        )}
      />
      <SeekButton
        seconds={30}
        render={(props, state) => (
          <button {...props}>
            <FastForwardIcon /> {state.seconds}s
          </button>
        )}
      />
    </>
  );
}

​
Props

​
seconds
number
Number of seconds to seek. Positive values seek forward, negative values seek backward. Defaults to 30.
​
render
ReactElement | ((props: HTMLProps, state: SeekButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state.
​
label
string | ((state: SeekButton.State) => string)
Override the automatic aria-label. By default: "Seek forward 30 seconds" or "Seek backward 10 seconds".
​
disabled
boolean
Disables the button.
​
className
string | ((state: SeekButton.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: SeekButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

AttributeValue / Description
data-direction"forward" | "backward" — seek direction derived from the seconds prop.
data-secondsThe configured seek amount in seconds.

​
Accessibility

Renders a <button> element. The aria-label is automatically set to describe the action, e.g. "Seek forward 30 seconds" or "Seek backward 10 seconds". Override with the label prop. Keyboard activation: Enter / Space.

Build docs developers (and LLMs) love

Get started for freeTalk to us