Skip to content
FrameworkStyle

SeekIndicator

A temporary visual indicator for keyboard and gesture seeking

Import

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

Anatomy

<SeekIndicator.Root>
  <SeekIndicator.Value />
</SeekIndicator.Root>

Behavior

SeekIndicator displays feedback for seek actions emitted by a Hotkey or Gesture in the same player Container. It does not react to current-time changes or seek commands invoked directly through the player store.

Action Direction Value
seekStep The sign of value determines forward or backward The absolute number of seconds, such as 10s
seekToPercent The target percentage is compared with the current time The formatted current time when the action occurred

Rapid seekStep actions in the same direction accumulate while the indicator is open. For example, two 10-second forward actions display 20s. Changing direction or using seekToPercent starts a new display. During a rapid sequence, another full step is not added when it would pass the start or duration boundary.

For seekToPercent, pass a percentage from 0 to 100 as value. A Hotkey with keys="0-9" can omit value; the pressed digit maps to 0%, 10%, and so on through 90%.

The indicator closes after closeDelay, which defaults to 800 milliseconds. React stops rendering the Root after its close transition. The HTML custom element remains in the document with hidden until the next handled seek action.

Styling

Attribute Values Description
data-open Present / absent Present while the indicator is open
data-direction "forward" | "backward" Direction of the handled seek
data-starting-style Present / absent Present during the open transition
data-ending-style Present / absent Present during the close transition

Position the Root from data-direction and use the transition attributes for entry and exit styles.

React renders standard DOM elements. Add a className to the Root:

.seek-indicator[data-direction="backward"] {
  left: 1rem;
}

.seek-indicator[data-direction="forward"] {
  right: 1rem;
}

.seek-indicator[data-starting-style],
.seek-indicator[data-ending-style] {
  opacity: 0;
}

Accessibility

SeekIndicator is visual feedback and does not create a live region. Keep the same seek operation available through keyboard-operable controls, and pair it with StatusAnnouncer when changes should be announced to screen readers. Do not make SeekIndicator.Value a live region because rapid seek input would produce repeated announcements.

Examples

Basic Usage

Focus the player, then press the left or right arrow key to seek by ten seconds. Press a digit from 0 through 9 to seek to a percentage of the duration.

Focus the player · ←/→: seek 10s · 0–9: seek to percent

import { Container, createPlayer, Hotkey, SeekIndicator } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

import './BasicUsage.css';

const { Player } = createPlayer({ features: videoFeatures });

export default function BasicUsage() {
  return (
    <Player>
      <Container className="react-seek-indicator-basic" tabIndex={0}>
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
        <p className="react-seek-indicator-basic__instructions">
          Focus the player · ←/→: seek 10s · 0–9: seek to percent
        </p>
        <SeekIndicator.Root className="react-seek-indicator-basic__indicator" aria-hidden="true">
          <SeekIndicator.Value className="react-seek-indicator-basic__value" />
        </SeekIndicator.Root>
        <Hotkey keys="ArrowLeft" action="seekStep" value={-10} />
        <Hotkey keys="ArrowRight" action="seekStep" value={10} />
        <Hotkey keys="0-9" action="seekToPercent" />
      </Container>
    </Player>
  );
}

API Reference

Root

Props

PropTypeDefaultDetails
closeDelaynumber—

State

State is accessible via the render, className, and style props.

PropertyTypeDetails
transitionStartingboolean
transitionEndingboolean
openboolean
generationnumber
direction'forward' | 'backward' | null
countnumber
seekTotalnumber
valuestring | null
currentTimestring

Data attributes

AttributeTypeDetails
data-open
data-direction'forward' | 'backward' | null
data-starting-style
data-ending-style

Value

Props

PropTypeDefaultDetails
classNamestring | ((state: SeekIndicatorCore.State) => string | undefined)—
renderReactElement | ((props: HTMLProps, state: SeekIndicatorCore.State) => ReactElement | null)—
styleCSSProperties | ((state: SeekIndicatorCore.State) => CSSProperties | undefined)—