Stream type

Stream delivery type (live / on-demand) state for the player store

Tracks the current stream delivery type so components can toggle live-specific UI (a live indicator, “jump to live edge” affordance, hiding the time display, etc.).

When the media exposes its own streamType (e.g. HLS sources derive it from the manifest), the feature syncs on streamtypechange. For plain media elements without that capability, it falls back to duration-based detection: an infinite duration reports 'live', a finite positive duration reports 'on-demand', and anything else reports 'unknown'.

API Reference

State

Property	Type	Details
`streamType`	`'on-demand' \| 'live' \| 'unknown'`
Description Current stream delivery type. Components use this to toggle live-specific UI (e.g. a live indicator, a "jump to live edge" affordance, or hiding the time display).

Selector

Pass selectStreamType to usePlayer to subscribe to stream type state. Returns undefined if the stream type feature is not configured.

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

function LiveIndicator() {
  const stream = usePlayer(selectStreamType);
  if (stream?.streamType !== 'live') return null;

  return <span className="live-indicator">LIVE</span>;
}

import { createPlayer, MediaElement, selectStreamType } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

class LiveIndicator extends MediaElement {
  readonly #stream = new PlayerController(this, context, selectStreamType);
}