The Media Live Button shows when the stream is live via an indicator (red dot, by default). It also allows the viewer to seek to the most current part of the stream by clicking on the button (“seek to live”).

Default: Media is not live


Media is live

<media-live-button media-time-is-live></media-live-button>

Alternate text

  <span slot="text">Hello</span>

Alternate indicator SVG

<media-live-button media-time-is-live>
  <svg slot="indicator" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"></circle></svg>

Alternate indicator text or font icon

<media-live-button media-time-is-live>
  <span slot="indicator">Hello!</span>

Common Use: Text is also the indicator

  #textlive {
    --media-live-indicator-off-icon-color: white;
<media-live-button id="textlive">
  <span slot="indicator">LIVE</span>
  <span slot="spacer"></span>
  <span slot="text"></span>
NameTypeDefault ValueDescription
media-time-is-livebooleanfalseInclude when the media time is at or close to the most current time or live edge. Clicking the button will not seek to live when true. [Set automatically by media-controller.]
media-pausedbooleanfalseInclude when the media is paused. The button will unpause the video if paused when seeking to live. [Set automatically by media-controller.]
NameDefault TypeDescription
texttextThe text content of the button, with a default of “LIVE”.
indicatorsvgThe default is an SVG of a circle that changes to red when the video or audio is live. Can be replaced wiht your own SVG or font icon.
spacertextA simple text space (&nbsp;) between the indicator and the text.

See our styling docs

--media-live-indicator-colorThe color of the indicator icon when the audio or video is live
--media-live-button-icon-colorThe color of the indicator icon when the audio or video is not live