Live

Live edge state for the player store

Exposes live-edge state so components can render a “jump to live” button, detect DVR vs. standard live, or hide live-only UI for on-demand sources.

liveEdgeStart is the presentation time at which the Live Edge Window begins — playback is “at the live edge” when currentTime >= liveEdgeStart. targetLiveWindow reports the seekable range size: 0 for standard latency live, Infinity for DVR, NaN for on-demand or unknown. Both values are NaN when the media doesn’t expose live-edge state (anything other than an HLS source today).

The live feature is included by the liveVideoFeatures and liveAudioFeatures presets; apps that build a custom preset can compose it in directly.

API Reference

State

Property	Type	Details
`liveEdgeStart`	`number`
Description Presentation time marking the start of the Live Edge Window. Playing at the live edge when `currentTime >= liveEdgeStart`. `NaN` when the stream isn't live or the value is unknown.
`targetLiveWindow`	`number`
Description Offset representing the seekable range size for live content. `0` for standard latency live, `Infinity` for DVR, `NaN` for on-demand or unknown.

Selector

Pass selectLive to usePlayer to subscribe to live state. Returns undefined if the live feature is not configured.

import { selectLive, selectTime, usePlayer } from '@videojs/react';

function LiveEdgeIndicator() {
  const live = usePlayer(selectLive);
  const time = usePlayer(selectTime);
  if (!live || Number.isNaN(live.targetLiveWindow)) return null;

  const atEdge = time != null && time.currentTime >= live.liveEdgeStart;
  return <span className="live-indicator">{atEdge ? 'LIVE' : 'BEHIND LIVE'}</span>;
}

import { createPlayer, MediaElement, selectLive } from '@videojs/html';
import { liveVideoFeatures } from '@videojs/html/live-video';

const { PlayerController, context } = createPlayer({ features: liveVideoFeatures });

class LiveEdgeButton extends MediaElement {
  readonly #live = new PlayerController(this, context, selectLive);
}