FrameworkStyle

Time

Components for displaying and composing media time information

Anatomy 

<Time.Group>
  <Time.Value type="current" />
  <Time.Separator />
  <Time.Value type="duration" />
</Time.Group>

Behavior

Three display types — current, duration, and remaining — in digital format with smart padding:

  • Hours are never padded (1:05:30, not 01:05:30)
  • Minutes are padded 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 Group. Remaining time displays a negative sign (customizable via the negativeSign prop).

Styling

The negative sign is rendered inside <span aria-hidden="true"> and can be hidden with CSS: 

[data-type="remaining"] > span[aria-hidden] {
  display: none;
}

Accessibility

Each <Time.Value> has:

  • aria-label for the static role label (“Current time”, “Duration”, “Remaining”)
  • aria-valuetext for the dynamic human-readable time (“1 minute, 30 seconds”)

No aria-live region is used — time updates too frequently and might overwhelm screen readers. The separator is aria-hidden="true" since screen readers already hear each time value separately. The negative sign is also aria-hidden because aria-valuetext already conveys “remaining”. In React, <time datetime> provides machine-readable time for parsers.

Examples

Current Time 

import { createPlayer, features, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './CurrentTime.css';

const Player = createPlayer({ features: [...features.video] });

export default function CurrentTime() {
  return (
    <Player.Provider>
      <Player.Container className="react-time-current-time">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Value type="current" className="react-time-current-time__value" />
      </Player.Container>
    </Player.Provider>
  );
}

Current / Duration 

import { createPlayer, features, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './CurrentDuration.css';

const Player = createPlayer({ features: [...features.video] });

export default function CurrentDuration() {
  return (
    <Player.Provider>
      <Player.Container className="react-time-current-duration">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Group className="react-time-current-duration__group">
          <Time.Value type="current" />
          <Time.Separator />
          <Time.Value type="duration" />
        </Time.Group>
      </Player.Container>
    </Player.Provider>
  );
}

Remaining 

import { createPlayer, features, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './Remaining.css';

const Player = createPlayer({ features: [...features.video] });

export default function Remaining() {
  return (
    <Player.Provider>
      <Player.Container className="react-time-remaining">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Value type="remaining" className="react-time-remaining__value" />
      </Player.Container>
    </Player.Provider>
  );
}

Custom Separator 

import { createPlayer, features, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './CustomSeparator.css';

const Player = createPlayer({ features: [...features.video] });

export default function CustomSeparator() {
  return (
    <Player.Provider>
      <Player.Container className="react-time-custom-separator">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Group className="react-time-custom-separator__group">
          <Time.Value type="current" />
          <Time.Separator> of </Time.Separator>
          <Time.Value type="duration" />
        </Time.Group>
      </Player.Container>
    </Player.Provider>
  );
}

Custom Negative Sign 

import { createPlayer, features, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './CustomNegativeSign.css';

const Player = createPlayer({ features: [...features.video] });

export default function CustomNegativeSign() {
  return (
    <Player.Provider>
      <Player.Container className="react-time-custom-negative-sign">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Value type="remaining" negativeSign="~" className="react-time-custom-negative-sign__value" />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Value

Displays a formatted time value (current, duration, or remaining).

Props

Prop Type Default
label string | function ''
negativeSign string '-'
type 'current' | 'duration' | 'remaining' 'current'

State

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

Property Type
type 'current' | 'duration' | 'remaining'
seconds number
negative boolean
text string
phrase string
datetime string

Data attributes

Attribute Description
data-type The type of time being displayed.

Group

Container for composed time displays. Renders a <span> element.

Separator

Divider between time values. Hidden from screen readers.

VideoJS