<media-time-display>

Display only component to show the time of the playhead.

Default

<media-time-display></media-time-display>

Current time of 2 minutes

<media-time-display mediacurrenttime="120.0"></media-time-display>

Current time of one hour

<media-time-display mediacurrenttime="3600.0"></media-time-display>

Include duration (10 minutes)

<media-time-display
  mediacurrenttime="120"
  mediaduration="600"
  showduration
></media-time-display>

Show remaining time (at 2 minutes of 10)

<media-time-display
  mediacurrenttime="120"
  mediaduration="600"
  remaining
></media-time-display>

Reference

Section titled Reference

Attributes

Section titled Attributes
Name Type Description
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
remaining boolean Toggle on to show the remaining time instead of elapsed time.
showduration boolean Toggle on to show the duration.
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

Section titled Media UI Attributes

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name Type Description
mediacurrenttime string Set to the current media time.
mediaduration string Set to the media duration.
mediaseekable string Set to the seekable time ranges.

CSS Variables

Section titled CSS Variables
Name Default Description
--media-time-display-display inline-flex `display` property of display.
--media-control-hover-background `background` of control hover state.
--media-primary-color rgb(238 238 238) Default color of text.
--media-secondary-color rgb(20 20 30 / .7) Default color of background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) `color` of text.
--media-control-display `display` property of control.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .7)) `background` of control.
--media-control-padding 10px `padding` of control.
--media-control-height 24px `line-height` of control.
--media-font var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif) `font` shorthand property.
--media-font-weight normal `font-weight` property.
--media-font-family helvetica neue, segoe ui, roboto, arial, sans-serif `font-family` property.
--media-font-size 14px `font-size` property.
--media-text-content-height var(--media-control-height, 24px) `line-height` of text.