Skip to content
FrameworkStyle

Stream type

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

Tracks whether the current source is live, on-demand, or not known yet. Use it to choose which controls to show.

streamType is 'live', 'on-demand', or 'unknown'. It does not tell you how close playback is to the live edge or whether viewers can rewind.

HLS media reads the stream type from the loaded playlist. If you set streamType yourself, your value takes priority until you set it back to 'unknown'. Other media falls back to the browser’s duration: Infinity means live, a finite positive value means on-demand, and any other value means unknown.

Add streamTypeFeature to a custom player when you need streamType in player state. The live presets separately include the live feature, which tracks the live edge.

Import

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

No packaged feature bundle includes this feature — add it to your createPlayer features yourself.

API Reference

State

PropertyTypeDetails
streamType(typeof MediaStreamTypes)[keyof typeof MediaStreamTypes]

Selector

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

import { createPlayer, selectStreamType, streamTypeFeature } from '@videojs/react';
import { liveVideoFeatures } from '@videojs/react/live-video';

const { Player, usePlayer } = createPlayer({
  features: [...liveVideoFeatures, streamTypeFeature],
});

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

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