<media-duration-display>

Display only component to show the duration of the media.

Default

<media-duration-display></media-duration-display>

Current time of 2 minutes

<media-duration-display mediaduration="120.0"></media-duration-display>

Current time of one hour

<media-duration-display mediaduration="3600.0"></media-duration-display>

Reference

Attributes

Name	Type	Description
`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
`mediaduration`	`string`	Set to the media duration.

CSS Variables

Name	Default	Description
`--media-duration-display-display`	`inline-flex`	`display` property of display.
`--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.