Time

Playback position and duration state for the player store

Tracks playback position and duration. During live playback, the browser may report Infinity as the duration. The player reports the end of the last available seekable range instead, so the value stays finite and moves forward with the stream. This is the newest available time, not the length of the rewindable window; its first available time may be greater than zero. Use live state or stream type to check whether the source is live.

Import

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

The audioFeatures, liveAudioFeatures, liveVideoFeatures, and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`currentTime`	`number`
Description Current playback position in seconds.
`duration`	`number`
Description Total duration in seconds (0 if unknown).
`seeking`	`boolean`
Description Whether a seek operation is in progress.

Actions

Action	Type	Details
`seek`	`(time: number) => Promise<number>`
Description Seek to a time in seconds. Returns the actual position after seek.

Selector

Pass selectTime to usePlayer to subscribe to time state. Returns undefined if the time feature is not configured.

import { selectTime, usePlayer } from '@videojs/react';

function TimeDisplay() {
  const time = usePlayer(selectTime);
  if (!time) return null;

  return (
    <span>
      {Math.floor(time.currentTime)} / {Math.floor(time.duration)}
    </span>
  );
}

import { createPlayer, UIElement, selectTime } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

class TimeDisplay extends UIElement {
  readonly #time = new PlayerController(this, selectTime);
}