# 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](https://videojs.org/docs/framework/react/reference/api/feature-live), which tracks the live edge.

## Import

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

No packaged [feature bundle](https://videojs.org/docs/framework/react/guides/presets) includes this feature — add it to your [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) features yourself.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | Current stream delivery type. Components use this to show live-specific UI (for example, a live indicator or a "jump to live edge" button) or hide the time display. |

### Selector

Pass `selectStreamType` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to stream type state. Returns `undefined` if the stream type feature is not configured.

**LiveIndicator.tsx**

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

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt