Article

Adding an AirPlay Button to Your Safari Media Controls

Create a custom control that adds AirPlay to your Safari media player.

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:

Listing 1

This markup includes a set of pause and play controls for a video.

<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

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.

Listing 2

This markup adds an AirPlay button to our previous controls.

<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.

Listing 3

This JavaScript event listener detects AirPlay availability and updates the 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:

Listing 4

This code uses the AirPlay route picker to select an 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.

Listing 5

This code updates styles when AirPlay playback changes.

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

See Also

First Steps

Adding Picture in Picture to Your Safari Media Controls

Create a custom control that adds Picture in Picture to your Safari media player.