Skip to main content
Time is a compound component for displaying formatted media time values. Three display types are supported: current, duration, and remaining.

​
Sub-components

ComponentDescription
Time.GroupLayout wrapper that synchronizes hour display across contained Time.Value elements.
Time.ValueRenders a formatted time value as a <time> element.
Time.SeparatorDecorative separator between time values (e.g., /). aria-hidden by default.
Time.Value requires the time feature to be registered with the player.

​
Import

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

​
Basic Usage

​
Current Time

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

function PlayerControls() {
  return <Time.Value type="current" className="current-time" />;
}

​
Current / Duration

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

function PlayerControls() {
  return (
    <Time.Group className="time-display">
      <Time.Value type="current" />
      <Time.Separator>/</Time.Separator>
      <Time.Value type="duration" />
    </Time.Group>
  );
}

​
Remaining Time

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

function PlayerControls() {
  return <Time.Value type="remaining" negativeSign="−" className="remaining-time" />;
}

​
Time.Value Props

​
type
"current" | "duration" | "remaining"
Which time value to display. Defaults to "current".
​
negativeSign
string
Custom negative sign character for remaining time display. Defaults to "-". The sign is rendered aria-hidden since aria-valuetext already conveys the remaining meaning.
​
label
string
Override the automatic aria-label. By default: "Current time", "Duration", or "Remaining".
​
className
string | ((state: Time.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: Time.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.
​
render
ReactElement | ((props: HTMLProps, state: Time.State) => ReactElement | null)
Custom render prop.

​
Time.Group Props

​
children
ReactNode
Time.Value and Time.Separator elements to group together.
​
className
string
CSS class name for the group wrapper element.

​
Formatting

Time values use digital format with smart padding:
  • Hours are never padded (1:05:30, not 01:05:30)
  • Minutes are padded only when hours are shown (1:05:30, but 5:30)
  • Seconds are always padded (1:05, not 1:5)
Hour display is triggered when either the current value or the duration exceeds 1 hour, ensuring consistency within a Time.Group.

​
Accessibility

Each Time.Value element has:
  • aria-label for the static role label ("Current time", "Duration", "Remaining")
  • aria-valuetext for the dynamic human-readable time (e.g., "1 minute, 30 seconds")
  • datetime attribute on the <time> element for machine-readable time
No aria-live region is used — time updates too frequently and would overwhelm screen readers. Time.Separator is aria-hidden="true" since screen readers hear each value separately.

Build docs developers (and LLMs) love

Get started for freeTalk to us