Skip to content
FrameworkStyle

LiveButton

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

Import

import { LiveButton } from '@videojs/react';

Anatomy

<LiveButton />

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 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

Use data-live-edge to color the button red at the edge and gray behind it:

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; }

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 or playback is at the live edge, aria-disabled="true" is set. 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>
  );
}

API Reference

Props

PropTypeDefaultDetails
disabledbooleanfalse
labelobject''

State

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

PropertyTypeDetails
label{ key: string; text: string } | string
liveboolean
liveEdgeboolean

Data attributes

AttributeTypeDetails
data-live
data-live-edge