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

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

Showing the duration can be configured with the showduration attribute.

<media-controller defaultsubtitles>
  <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 showduration></media-time-display>
  </media-control-bar>
</media-controller>

Show the remaining time by default

Section titled Show the remaining time by default

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

<media-controller defaultsubtitles>
  <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>
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).

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