media-live-button

Accessible live indicator button that seeks to the live edge when pressed

Import

import '@videojs/html/ui/live-button';

Anatomy

<media-live-button></media-live-button>

Behavior

LiveButton indicates whether playback is at the live edge and acts as a “go to live” control. While playback is behind the edge, clicking seeks to the live edge — the end of the last seekable range. At the edge the button goes inactive (aria-disabled) and clicking is a no-op.

The button is also disabled whenever it has no live edge to seek to: the media is not live, the seekable ranges are still empty (before metadata loads, for example), or the last range ends at Infinity. It reports disabled in its state, sets data-disabled, and ignores activation until a seek target exists. Passing disabled forces the same state.

The button combines three player features: live for liveEdgeStart and targetLiveWindow, time for currentTime and the seek() action, and buffer for seekable. All three are included in the liveVideoFeatures and liveAudioFeatures presets, and the packaged live skins include the button.

Media counts as live while targetLiveWindow is not NaN. That value is how far behind the live edge viewers can seek: 0 means the stream is watchable only at the edge, and Infinity means the stream keeps its recording seekable so viewers can rewind and catch up, like a DVR. For on-demand media the button reports neither live nor liveEdge and stays inert.

The live edge is not a single instant: it begins 5 seconds before liveEdgeStart, the position the media reports live playback starting at, so playback that drifts slightly behind still counts as live. When the media does not report liveEdgeStart, the edge is the trailing 10 seconds of the seekable window instead.

Without children, the button renders the translated “Live” badge text.

See Play live streams for how live state flows through the player.

Styling

Attribute	Values	Description
`data-live`	Present / absent	Present when the stream is live (or DVR)
`data-live-edge`	Present / absent	Present when playback is at the live edge
`data-disabled`	Present / absent	Present when the button is non-interactive (mirrors `aria-disabled`)

Use data-live-edge to color the button red at the edge and gray behind it, and data-disabled to fade it while no live-edge target is available:

media-live-button { color: gray; }
media-live-button[data-live-edge] { color: red; }
media-live-button[data-disabled] { opacity: 0.5; }

React renders a <button> element with the same data attributes. Add a className and use it as the selector:

.live-button { color: gray; }
.live-button[data-live-edge] { color: red; }
.live-button[data-disabled] { opacity: 0.5; }

Accessibility

Renders a <button> with an automatic aria-label that updates based on state: “Playing live” at the live edge, “Seek to live edge” while behind it. Override with the label prop, which accepts a text descriptor, literal string, or function returning either. A text descriptor contains an opaque translation key and English fallback, for example { key: 'live.playing', text: 'Playing live' }. When the button is disabled — explicitly, or because no live-edge seek target is available yet — or playback is at the live edge, aria-disabled="true" is set and activation is ignored. Keyboard activation: Enter / Space.

Examples

Basic Usage

The demo plays a continuously running live stream. Seek backward to move behind the live edge, then press the Live button to jump back to it.

import { Container, createPlayer, LiveButton, SeekButton } from '@videojs/react';
import { liveVideoFeatures } from '@videojs/react/live-video';
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';

const { Player } = createPlayer({ features: liveVideoFeatures });

export default function BasicUsage() {
  return (
    <Player>
      <Container className="react-live-button-basic">
        <HlsJsVideo src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" autoPlay muted playsInline />
        <div className="react-live-button-basic__buttons">
          <SeekButton seconds={-30} className="react-live-button-basic__seek">
            {'⏪'} 30s
          </SeekButton>
          <LiveButton className="react-live-button-basic__live">
            <span className="react-live-button-basic__dot" />
            Live
          </LiveButton>
        </div>
      </Container>
    </Player>
  );
}

.react-live-button-basic {
  position: relative;
}

.react-live-button-basic video {
  width: 100%;
}

.react-live-button-basic__buttons {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
}

.react-live-button-basic__seek,
.react-live-button-basic__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.react-live-button-basic__live[data-live-edge] {
  cursor: default;
}

.react-live-button-basic__dot {
  width: 8px;
  height: 8px;
  background: gray;
  border-radius: 50%;
}

.react-live-button-basic__live[data-live-edge] .react-live-button-basic__dot {
  background: red;
}

⏪ 30s

Live

<live-video-player class="html-live-button-basic">
  <media-container>
    <hlsjs-video src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" autoplay muted playsinline></hlsjs-video>
    <div class="html-live-button-basic__buttons">
      <media-seek-button seconds="-30" class="html-live-button-basic__seek">&#9194; 30s</media-seek-button>
      <media-live-button class="html-live-button-basic__live">
        <span class="html-live-button-basic__dot"></span>
        Live
      </media-live-button>
    </div>
  </media-container>
</live-video-player>

.html-live-button-basic media-container {
  position: relative;
}

.html-live-button-basic media-container hlsjs-video {
  display: block;
  width: 100%;
}

.html-live-button-basic__buttons {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
}

.html-live-button-basic__seek,
.html-live-button-basic__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.html-live-button-basic__live[data-live-edge] {
  cursor: default;
}

.html-live-button-basic__dot {
  width: 8px;
  height: 8px;
  background: gray;
  border-radius: 50%;
}

.html-live-button-basic__live[data-live-edge] .html-live-button-basic__dot {
  background: red;
}

import '@videojs/html/live-video/player';
import '@videojs/html/ui/container';
import '@videojs/html/media/hlsjs-video';
import '@videojs/html/ui/live-button';
import '@videojs/html/ui/seek-button';

API Reference

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Attribute `disabled` Description Whether the button is disabled.
`label`	`object`	`''`
Attribute `label` Description Custom label for the button. Type `{ key: string; text: string } \| string \| ((state: LiveButtonState) => Text \| string)`

State

State is accessible via the render, className, and style props.

State is reflected as data attributes for CSS styling.

Property	Type	Details
`label`	`{ key: string; text: string } \| string`
`live`	`boolean`
Description Whether the stream is live (or DVR).
`liveEdge`	`boolean`
Description Whether playback is at the live edge.
`disabled`	`boolean`
Description Whether seeking to the live edge is temporarily unavailable.

Data attributes

Attribute	Type	Details
`data-live`
Description Present when the stream is live (or DVR).
`data-live-edge`
Description Present when playback is at the live edge.
`data-disabled`
Description Present when the button is non-interactive (mirrors `aria-disabled`).