Adding an AirPlay button to your Safari media controls

Overview

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:

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="playButton">Play</button>
    <button id="pauseButton" hidden>Pause</button>
</div>

Add an AirPlay element to your markup

Add markup for the AirPlay button, setting it to hidden by default to mimic the behavior of the AirPlay button in default controls. The default button appears only when AirPlay is available.

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="playButton">Play</button>
    <button id="pauseButton" hidden>Pause</button>
    <button id="airPlayButton" hidden disabled>AirPlay</button>
</div> 

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.

if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener('webkitplaybacktargetavailabilitychanged',
        function(event) {
            switch (event.availability) {
            case "available":
                airPlayButton.hidden = false;
                airPlayButton.disabled = false;
                break;
            case "not-available":
                airPlayButton.hidden = true;
                airPlayButton.disabled = true;
                break;
        } }); 
} 

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:

if (!window.WebKitPlaybackTargetAvailabilityEvent)
    return;
var airPlayButton = document.getElementById("airPlayButton");
var video = document.getElementById("video");
airPlayButton.addEventListener('click', function(event) {
    video.webkitShowPlaybackTargetPicker();
});

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.

 if (!window.WebKitPlaybackTargetAvailabilityEvent)
     return;
 var video = document.getElementById("video");
 video.addEventListener('webkitcurrentplaybacktargetiswirelesschanged', 
     function(event) {
         updateAirPlayButtonWirelessStyle();
         updatePageDimmerForWirelessPlayback();
     });

See Also

Essentials

• Adding Picture in Picture to your Safari media controls