Skip to content

ReferenceFeatures

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.

Cast to AirPlay and Chromecast

Import

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

The liveVideoFeatures and videoFeatures feature bundles include this feature.

API Reference

State

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

Actions

ActionTypeDetails
toggleRemotePlaybackfunction

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>
  );
}