AirPlay

Adds an AirPlay button to the controls once Safari finds a device. Most browsers won't ever show it, so the demo says what you'd need and whether a device has been found.

"use client";import { useEffect, useRef, useState } from "react";import { airplay } from "react-video-kit/airplay";import type { Player } from "react-video-kit/core";import { VideoPlayer } from "react-video-kit/player";const plugins = [airplay()];export default function AirPlay() {  const player = useRef<Player>(null);  const [found, setFound] = useState(false);  useEffect(() => {    const current = player.current;    if (!current) return;    return current.subscribe(() => setFound(current.plugin(airplay).state().available));  }, []);  return (    <div className="flex flex-col gap-3">      <VideoPlayer ref={player} src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />      <div className="flex flex-col gap-1 text-sm text-current opacity-80">        <p>          The AirPlay button joins the controls once Safari reports a device it can send to. To see it,          you need Safari and an AirPlay device nearby. Other browsers never show it.        </p>        <p>AirPlay device found: {found ? "yes" : "no"}</p>      </div>    </div>  );}

Usage

import { airplay } from "react-video-kit/airplay";import { VideoPlayer } from "react-video-kit/player";const plugins = [airplay()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

It takes no options.

Build your own control

prompt opens Safari's picker. It has to run from a click or key press.

"use client";import { useCommands, useVideoState } from "react-video-kit";import { airplay } from "react-video-kit/airplay";function SendToTv() {  const available = useVideoState(airplay, (state) => state.available);  const active = useVideoState(airplay, (state) => state.active);  const { prompt } = useCommands(airplay);  if (!available) return null;  return (    <button aria-pressed={active} onClick={() => prompt()}>      Send to TV    </button>  );}

Place the button yourself

VideoPlayer places AirPlayButton through the top-start slot. In your own layout, put it in the controls, and it still renders nothing until a device is found:

import * as Video from "react-video-kit";import { AirPlayButton } from "react-video-kit/airplay";<Video.Controls>  <AirPlayButton /></Video.Controls>;

Stream types

AirPlay uses Safari's native playback. It's meant to work with the native HLS that the hls plugin uses on Apple devices, but not when that plugin plays through hls.js:

import { hls } from "react-video-kit/hls";hls(); // Native HLS on Apple devices, which AirPlay can use.hls({ preferEngine: true }); // hls.js everywhere, which AirPlay can't use.

Behaviour

• Where the video element has no webkitShowPlaybackTargetPicker, the plugin does nothing. available stays false, and prompt is safe to call.
• available and active follow Safari's webkitplaybacktargetavailabilitychanged and webkitcurrentplaybacktargetiswirelesschanged events.
• The button has aria-pressed set while connected, and the root has data-airplay.
• The button hides whenever available is false, even while connected.
• The plugin only opens the picker and tracks state. Unlike chromecast, it adds no provider, so the player's commands keep going to the video element.
• It has no DRM handling of its own. Whether protected content can be sent is up to Safari.

API

Options

This plugin takes no options.

State

Read it with useVideoState(airplay, (state) => …).

Commands

Call them with useCommands(airplay).

Parts