# 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](https://videojs.org/docs/framework/react/guides/casting)

## Import

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

The `liveVideoFeatures` and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

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

### Actions

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

### Selector

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

**CastButton.tsx**

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

---

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