The <media-duration-display> component keeps your viewers informed about the duration of the current media loaded in the player.

This component’s primary use is intended to be display-only. Its time value will update automatically from any linked media-controller element.

    playsinline muted crossorigin
Name Type Description
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

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.
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.