<media-live-button>

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-live-button></media-live-button>

Media is live

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

Alternate text

Hello!

<media-live-button>
  <span slot="text">Hello</span>
</media-pip-button>

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>
</media-live-button>

Alternate indicator text or font icon

Hello!

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

Common Use: Text is also the indicator

LIVE

<style>
  #textlive {
    --media-live-indicator-off-icon-color: white;
  }
</style>
<media-live-button id="textlive">
  <span slot="indicator">LIVE</span>
  <span slot="spacer"></span>
  <span slot="text"></span>
</media-live-button>

Attributes

Name	Type	Default Value	Description
`media-time-is-live`	`boolean`	`false`	Include 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-paused`	`boolean`	`false`	Include when the media is paused. The button will unpause the video if paused when seeking to live. [Set automatically by media-controller.]

Slots

Name	Default Type	Description
`text`	`text`	The text content of the button, with a default of “LIVE”.
`indicator`	`svg`	The 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.
`spacer`	`text`	A simple text space (` `) between the indicator and the text.

CSS Vars

See our styling docs

Var	Description
`--media-live-indicator-color`	The color of the indicator icon when the audio or video is live
`--media-live-button-icon-color`	The color of the indicator icon when the audio or video is not live