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.

          
1
2
3
4
5
6
		    

# 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:

        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