<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

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  >
  </video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display></media-time-display>
  </media-control-bar>
</media-controller>

Open Sandbox

Show the duration

Showing the duration can be configured with the showduration attribute.

Media Controller also sets the defaultduration to use before the media is loaded.

<media-controller defaultduration="134">
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
    preload="none"
  >
  </video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display showduration></media-time-display>
  </media-control-bar>
</media-controller>

Open Sandbox

Show the remaining time by default

Showing the remaining time by default can be configured with the remaining attribute.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  >
  </video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display remaining></media-time-display>
  </media-control-bar>
</media-controller>

Open Sandbox

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

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.