<media-live-button>

The <media-live-button> component shows, via a red dot by default, whether the stream is live. It also allows viewers to seek to the most current part of the stream when clicking on the button (“seek to live”).

The behavior of the button will update automatically based on the state of the media.

• The indicator can be configured via the indicator slot.
• The text can be configured via the text slot.
• A spacer between the indicator and the text can be configured via the spacer slot.

<media-controller defaultsubtitles>
  <mux-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8"
  >
  </mux-video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-live-button></media-live-button>
  </media-control-bar>
</media-controller>

You can modify the contents of the <media-live-button> component using slots. This is useful if you’d like to use your own custom indicators and text instead of the default one provided by media-chrome.

Here’s an example of how you can replace the default indicator with a custom SVG and the text with the words “Live Button”

<media-controller defaultsubtitles>
  <mux-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8"
  >
  </mux-video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-live-button>
      <svg slot="indicator" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"></circle></svg>
      <span slot="text">Live Button</span>
    </media-live-button>
  </media-control-bar>
</media-controller>

The <media-live-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the paused state or the live state of the media changes.

You can use these attributes to style the button. For example, if the media is live, set the color to green instead of red:

media-live-button[mediatimeislive] {
  --media-live-button-indicator-color: green;
}

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.