<media-time-display>
The <media-time-display>
component is used to show the current or remaining time of media playback, optionally showing the media duration as well. Clicking the component will toggle between showing the current vs. the remaining time.
Default usage
Section titled Default usageShow the duration
Section titled Show the durationShowing the duration can be configured with the showduration
attribute.
Media Controller also sets the defaultduration
to use before the media is loaded.
Show the remaining time by default
Section titled Show the remaining time by defaultShowing the remaining time by default can be configured with the remaining
attribute.
Reference
Section titled ReferenceSlots
Section titled SlotsName | Description |
---|---|
| Default slotted elements. |
Attributes
Section titled AttributesName | 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. |
notoggle | boolean | Set this to disable click or tap behavior that toggles between remaining and current time. |
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 VariablesName | 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. |