Remote Playback

Remote playback state and actions for the player store

Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.

Google Cast concept guide — setup, configuration, and HLS

API Reference

State

Property	Type	Details
`remotePlaybackState`	`'disconnected' \| 'connecting' \| 'connected'`
Description Current remote playback connection state.
`remotePlaybackAvailability`	`'available' \| 'unavailable' \| 'unsupported'`
Description Whether remote playback can be requested on this platform.

Actions

Action	Type	Details
`toggleRemotePlayback`	`() => Promise<void>`
Description Toggle the remote playback connection.

Selector

Pass selectRemotePlayback to PlayerController to subscribe to remote playback state. Returns undefined if the remote playback feature is not configured.

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

function CastButton() {
  const remotePlayback = usePlayer(selectRemotePlayback);
  if (!remotePlayback || remotePlayback.remotePlaybackAvailability !== 'available') return null;

  return (
    <button onClick={remotePlayback.toggleRemotePlayback}>
      {remotePlayback.remotePlaybackState === 'connected' ? 'Disconnect' : 'Cast'}
    </button>
  );
}

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

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

class CastButton extends MediaElement {
  readonly #remotePlayback = new PlayerController(this, context, selectRemotePlayback);
}