Adding an AirPlay Button to Your Safari Media Controls
Create a custom control that adds AirPlay to your Safari media player.
Although default controls are available for audio and video elements in your Safari webpage, you can also create your own custom media controls. One of the custom controls you should add is an AirPlay button.
Write Markup for a Custom Control
In this example, the custom controls for a video have only a Play button and a hidden Pause button:
Add an AirPlay Element to Your Markup
As shown in the code below, the AirPlay button is hidden by default, to mimic the behavior of the AirPlay button in default controls. The default button appears only when AirPlay is available.
Add an Event Listener
To show the AirPlay button when AirPlay is available, you add an event listener for the webkitplaybacktargetavailabilitychanged event. This event detects when AirPlay availability changes, and it changes the visibility of the AirPlay button from the above default markup.
Select the AirPlay Device
Add this block of code to use the native AirPlay route picker in your controls. With this route picker, you can add and select an available AirPlay device:
Ensure that Styles Persist when Playing over AirPlay
Use the code below to listen for the event webkitcurrentplaybacktargetiswirelesschanged. This event fires when a media element starts or stops AirPlay playback. Use this event to update styles.