Skip to content

Module: src/casting/AirPlay

The AirPlay component enables AirPlay functionality on compatible browsers such as Safari macOS and Safari iOS. When a compatible streaming device is found (e.g., Apple TV or AirPlay Server Software on macOS), the user can stream the current video to this device. This component also works with HLS streams provided the video element exposes a regular https://...m3u8 URL. Blob-based MediaSource playback is not supported by AirPlay receivers. There is a heuristic that falls back to an MP4 rendition whenever both AV1 and MP4 are present, because AirPlay devices cannot decode AV1 (as of 2025).

Version
1.1.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
AirPlay.js, line 13

Constructor

new AirPlay(player, parent, optionsopt)

Creates an instance of the AirPlay component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent Controller

Reference to the parent instance.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Configuration options for the AirPlay component.

Properties
Name Type Attributes Default Description
showControllerButton boolean optional true

Shows or hides the controller button.
showMenuButton boolean optional true

Shows or hides the menu button.
Type
Object
Source
AirPlay.js, line 21

Reference to the main player instance.

Type
Player
Source
AirPlay.js, line 30

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
AirPlay.js, line 37

DomSmith instance for the AirPlay menu button.

Type
DomSmith
Source
AirPlay.js, line 43

DomSmith instance for the AirPlay controller button.

Type
DomSmith
Source
AirPlay.js, line 49

Stores the currently active stream object used for AirPlay.

Type
Media~metaData
Source
AirPlay.js, line 55

Reference to the native RemotePlayback API interface provided by the video element.

Type
RemotePlayback
Source
AirPlay.js, line 61

Saved stream source when replacing streams for restoring later.

Type
string
Source
AirPlay.js, line 67

Stores the callback identifier used by RemotePlayback API to manage availability watches.

Type
number
Source
AirPlay.js, line 73

Methods

private #onMediaReady(metaData)

Called when Video is ready for playback. Sets up the remote (if available).

Parameters:
Name Type Description
metaData Media~metaData

The currently selected metaData.
Listens
media/ready
Source
AirPlay.js, line 149

private #updateRemoteState()

Called whenever the RemotePlayback state changes.

Source
AirPlay.js, line 174

private #showAirPlayMenu(event)

Shows the AirPlay menu (natively rendered by the OS). Tries to use the remote API if possible. If connected via the remote API, tries to switch to a non-AV1 stream if possible.

Parameters:
Name Type Description
event Event

The original click event.
Source
AirPlay.js, line 220

private #onAvailability(event)

Invoked when AirPlay availability changes.

Parameters:
Name Type Description
event Event

The original WebKitPlaybackTargetAvailabilityEvent.
Listens
event:webkitplaybacktargetavailabilitychanged
Source
AirPlay.js, line 269

private #onAirPlayStatusChanged()

Invoked when AirPlay status changes, i.e., the user has activated or deactivated AirPlay.

Fires
airplay/start
airplay/stop
Source
AirPlay.js, line 298

private #attachWatchers()

Attaches the availability watchers to the video element. Uses either the native RemotePlayback API or the webkitcurrentplaybacktargetiswirelesschanged event.

Source
AirPlay.js, line 312

private #detachWatchers()

Detaches the availability watchers from the video element.

Source
AirPlay.js, line 333

private #enable(data)

Enables the AirPlay component.

Parameters:
Name Type Description
data Object

The event data.

Parameters:
Name Type Description
to Object

The new engine.
Listens
player/engine/switched
Source
AirPlay.js, line 355

private #disable(data)

Disables the AirPlay component.

Parameters:
Name Type Description
data Object

The event data.

Parameters:
Name Type Description
from Object

The previous engine.
to Object

The new engine.
Listens
player/engine/set
Source
AirPlay.js, line 375

destroy()

Removes all events, subscriptions, and DOM nodes created by this component.

Source
AirPlay.js, line 391

Events

airplay/start

This event is fired when AirPlay was started.

Listeners
PictureInPicture#disable
VisualizerAmbient#stopLoop
Source
AirPlay.js, line 406

airplay/stop

This event is fired when AirPlay was stopped.

Listeners
PictureInPicture#enable
VisualizerAmbient#startLoop
Source
AirPlay.js, line 411