1. Display
  2. Live Indicator

Display

Live Indicator

This component is used to display the current live status of the stream.

Usage

The <media-live-indicator> component displays the current live status of the stream. This includes whether it's live, at the live edge, or not live. In addition, this component is a button during live streams and will skip ahead to the live edge when pressed.
WARNING

This component will contain no content, sizing, or role when the current stream is not live.

Slots

Slots are available for providing custom content depending on the current live status:

Styling

        /* Apply styles to indicator. */
media-live-indicator {
}

/* Apply styles when stream is live. */
media-live-indicator[data-live] {
}

/* Apply styles when stream is _not_ live. */
media-live-indicator:not([data-live]) {
}

/* Apply styles when stream is at live edge. */
media-live-indicator[data-live-edge] {
}

/* Style default parts. */
media-live-indicator [part='container'] {
}
media-live-indicator [part='text'] {
}

Focus

        media-live-indicator {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-live-indicator[data-focus] {
}

Tailwind

The following is a headless example using Tailwind:
Previous <- Buffering Indicator
Next Toggle Button ->