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>

Examples

Current Time 

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

import './CurrentTime.css';

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

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

Current / Duration 

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

import './CurrentDuration.css';

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

export default function CurrentDuration() {
  return (
    <Player.Provider>
      <Player.Container className="time-current-duration">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Group className="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, Video } from '@videojs/react';

import './Remaining.css';

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

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

Custom Separator 

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

import './CustomSeparator.css';

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

export default function CustomSeparator() {
  return (
    <Player.Provider>
      <Player.Container className="time-custom-separator">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Time.Group className="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, Video } from '@videojs/react';

import './CustomNegativeSign.css';

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

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