Skip to content
FrameworkStyle

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

PropertyTypeDetails
remotePlaybackState'disconnected' | 'connecting' | 'connected'
remotePlaybackAvailability'available' | 'unavailable' | 'unsupported'

Actions

ActionTypeDetails
toggleRemotePlayback() => Promise<void>

Selector

Pass selectRemotePlayback to usePlayer 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>
  );
}