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.
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
Focus
CSS Variables
The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default live indicator styles:
Tailwind
The following is a headless example using Tailwind:
Component API
Props
Name | Type |
---|
Events
Name | Type |
---|
Name | Description |
---|---|
|
Used to insert content when media stream is live. |
|
Used to insert content when media playback is at live edge. |
|
Used to insert content when media stream is not live. |
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|