<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

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

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

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.