1. UI
  2. Time

UI

Time

This component is used to display certain media states as a unit of time, such as the current time or duration.

Import

tsx
        import { Time } from '@vidstack/player-react';

      

Usage

The <Time> component displays time formatted text (e.g., 01:30 represents 1 minute 30 seconds). The time can be based on either the current time, buffered amount, seekable amount, or duration.

          
        

The type property can be set to:

  • current: The current playback time.
  • seekable: The seekable amount of media (i.e., where the user can seek to without buffering).
  • buffered: The buffered amount of media. Similar to seekable, but the seekable amount can be greater than the buffered amount due to byte-range requests.
  • duration: The total length of media.
          
        

Remaining Time

You can use the remainder property to display the duration minus the selected type.