AirPlayButton

Import

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

Anatomy

<AirPlayButton />

Behavior

Opens the WebKit AirPlay playback target picker and reflects session state. AirPlay is a WebKit-only feature, so the button reports availability: "unsupported" outside Safari (macOS and iOS). On supported platforms availability flips to "available" once Safari discovers at least one AirPlay receiver on the local network, and "unavailable" otherwise.

An explicitly disabled, otherwise available button stays visible and focusable with aria-disabled="true" and data-disabled, but does not open the picker.

WebKit does not expose a "connecting" intermediate state — the state slice flips directly between "disconnected" and "connected" when the AirPlay session changes. When connected, the picker itself acts as the disconnect UI.

Styling

Use data-airplay-state to swap icons or labels based on the session state:

/* AirPlay active */
.airplay-button[data-airplay-state="connected"] {
  color: var(--accent);
}

Use data-disabled to style an explicitly disabled, available button:

.airplay-button[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

Unavailable and unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.

Accessibility

Renders a <button> with an automatic aria-label: “Start AirPlay” when disconnected, “Stop AirPlay” when connected. (The component also supports a "Connecting" label, but WebKit AirPlay never emits a connecting state, so that label is unreachable in practice.) Override with the label prop — either a string or a function that receives the current state. Keyboard activation: Enter / Space.

Examples

Basic Usage

import { AirPlayButton, Container, createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

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

export default function BasicUsage() {
  return (
    <Player>
      <Container className="media-container">
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
        <AirPlayButton
          className="media-airplay-button"
          render={(props, state) => (
            <button {...props}>{state.state === 'connected' ? 'Stop AirPlay' : 'Start AirPlay'}</button>
          )}
        />
      </Container>
    </Player>
  );
}

.media-container {
  position: relative;
}

.media-container video {
  width: 100%;
}

.media-airplay-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

/* Explicitly disabled while AirPlay is available. */
.media-airplay-button[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(1);
}

{ key: string; text: string } | string | ((state: AirPlayButtonState) => Text | string)

'disconnected' | 'connecting' | 'connected'

'available' | 'unavailable' | 'unsupported'

'disconnected' | 'connecting' | 'connected'

'available' | 'unavailable' | 'unsupported'