Source

Media source state and actions for the player store

Tracks the current media source and readiness.

Import

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

The audioFeatures, liveAudioFeatures, liveVideoFeatures, and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`source`	`string \| null`
Description Current media source URL (null if none).
`canPlay`	`boolean`
Description Whether enough data is loaded to begin playback.

Actions

Action	Type	Details
`loadSource`	`(src: string) => string`
Description Load a new media source. Returns the new source URL.

Selector

Pass selectSource to usePlayer to subscribe to source state. Returns undefined if the source feature is not configured.

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

function SourceInfo() {
  const source = usePlayer(selectSource);
  if (!source) return null;

  return <span>{source.src}</span>;
}

import { createPlayer, UIElement, selectSource } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

class SourceInfo extends UIElement {
  readonly #source = new PlayerController(this, selectSource);
}