1. Display
  2. Time

Display

Time

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

Usage

The <media-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.
  • buffered: The buffered amount of media.
  • duration: The total length of media.
          
        

Remaining Time

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

          
        

Styling

CSS Variables

The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default time styles:

css
        media-player {
  --media-time-font-size: 14px;
  --media-time-font-weight: 500;
  --media-font-family: sans-serif;
  --media-time-color: inherit;
  --media-time-bg: unset;
  --media-time-border-radius: unset;
  --media-time-letter-spacing: 0.025em;
}

      

Component API

Props

Name Type

type

'current' | 'buffered' | 'duration'

showHours

boolean

padHours

boolean

padMinutes

boolean

remainder

boolean

Events

Name Type
Name Description
Name Type
Name Description

Instance Props

Name Type

Instance Methods

Name Type