Airplay Ad Feature – Sizmek Help Center

Overview

Introduction and Screenshots

The Sizmek Airplay Ad Feature lets you add Apple Airplay support to your creative. With Airplay support, you will have the ability to stream music and videos to external speakers or TVs that support Airplay when your creative is served in Safari and iOS devices.

Click for live demo

Demo

The following table provides links to the demo for the Airplay ad feature.

Demo	Preview demo

Supported Platforms

Platform	Supported Version
iPhone	iOS 10.0 and later
iPad	iOS 10.0 and later
Desktop Safari	9+

How to Build

The first step is to add the x-webkit-airplay attribute to the video or audio tag in your html file and set it to "allow". Airplay will not work without this attribute.

<video id="video" x-webkit-airplay="allow" controls muted playsinline>
	<source src="videos/sizmek.mp4" type="video/mp4" />
	Your browser does not support the video tag.
</video>

Add a button to your html that will act as the Airplay menu button allowing users to bring up the Airplay menu that lists which Airplay devices are available. We advise keeping this button hidden until it is determined that Airplay is available. See step 3.
```
<video id="video" controls autoplay>
	...
</video>
<button id="airplayButton"></button>
```

Next, establish references to the video and airplay button elements and then determine if Airplay is supported by checking for WebKitPlaybackTargetAvailabilityEvent on the window. If so, add the webkitplaybacktargetavailabilitychanged event listener. When this event is fired we use an event handler to hide or show the Airplay button.

<script type="text/javascript">
    // Establish reference to video tag
    var theVideo = document.getElementById('video');
    // Establish reference to Airplay button
    var airplayButton = document.getElementById('airplayButton');

    // Detect if AirPlay is available - Mac OS Safari 9+ only
    if (window.WebKitPlaybackTargetAvailabilityEvent) {
	// AirPlay available, add listener
	theVideo.addEventListener('webkitplaybacktargetavailabilitychanged', handleAirPlay, false);
    }

    // Handle AirPlay
    function handleAirPlay(event) {
	switch (event.availability) {
	    // if available, show button
	    case "available":
		airplayButton.style.display = 'block';
		break;
	    // if not available, hide button
	    default:
		airplayButton.style.display = 'none';
	}
    }
</script>

Lastly, we add an event listener to the Airplay button and on click, we use the Apple API webkitShowPlaybackTargetPicker method to show the Airplay menu.

<script type="text/javascript">
    // Establish reference to video tag
    var theVideo = document.getElementById('video');
    // Create video module instance to track video events
    var trackedVideo = new EBG.VideoModule(theVideo);
    // Establish reference to Airplay button
    var airplayButton = document.getElementById('airplayButton');

    // Detect if AirPlay is available - Mac OS Safari 9+ only
    if (window.WebKitPlaybackTargetAvailabilityEvent) {
	// AirPlay available, add listener
	theVideo.addEventListener('webkitplaybacktargetavailabilitychanged', handleAirPlay, false);
    }

    // Handle AirPlay
    function handleAirPlay(event) {
	switch (event.availability) {
	    ...
	}

	// Add Click handler to button
	airplayButton.addEventListener('click', function() {
	    // display airplay options window
	    theVideo.webkitShowPlaybackTargetPicker();
	});
    }
</script>

Advanced

Full Code Snippet

Please see the full script, below, needed to implement the Airplay functionality to your Audio or Video Tag.

Note: the code snippet below includes the EBG Video Module that adds Sizmek video tracking. However, it does not include styling which can affect the display and layout of the page. In the absence of styling, the video will load at the width and height of the video source possibly leading to undesirable results.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sizmek Airplay Ad Feature</title>
        <script type="text/javascript">EBModulesToLoad = ['Video'];</script>
        <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
    </head>
    <body>

        <!-- Begin Sizmek Airplay Ad Feature -->

        <video id="video" x-webkit-airplay="allow" controls muted>
	    <source src="videos/sizmek.mp4" type="video/mp4" />
	    Your browser does not support the video tag.
	</video>
        <button id="airplayButton"></button>

        <script type="text/javascript">
            adkit.onReady( function() {
	        // Establish boolean to track button
                var airPlayOn = false;
                // Establish reference to video tag
		var theVideo = document.getElementById('video');
		// Create video module instance to track video events
		var trackedVideo = new EBG.VideoModule(theVideo);
		// Establish reference to Airplay button
		var airplayButton = document.getElementById('airplayButton');

		// Detect if AirPlay is available - Mac OS Safari 9+ only
		if (window.WebKitPlaybackTargetAvailabilityEvent) {
		    // AirPlay available, add listener
		    theVideo.addEventListener('webkitplaybacktargetavailabilitychanged', handleAirPlay, false);
		}

		// Handle AirPlay
		function handleAirPlay(event) {
		    switch (event.availability) {
			// if available, show button
			case "available":
			    airplayButton.style.display = 'block';
			    break;
			// if not available, hide button
			    default:
			    airplayButton.style.display = 'none';
		    }
                    // only add listener once
		    if(!airPlayOn){
                        // Update boolean
                        airPlayOn = true;
                        // Add Click handler to button
		        airplayButton.addEventListener('click', function() {
			    // display airplay options window
			    theVideo.webkitShowPlaybackTargetPicker();
			    // Fire Clickthrough
			    EB.userActionCounter("AIRPLAY_OPENED");
		        });
                    }
		}
	    });
        </script>

        <!-- End Sizmek Airplay Ad Feature -->

    </body>
</html>

Ad Setup

Setting up an Ad in Sizmek MDX 2.0

When you are finished authoring your ad, put all of its files in one folder and compress that folder to a ZIP. When uploaded to the platform, the ZIP's files will automatically be extracted, creating a Workspace on the platform.

Setting up an Ad in Sizmek Advertising Suite

Requirements Checklist

Requires Adkit, will not work with EBLoader only - learn more aout Adkit
Video Tracking requires the EB Video Module, add the include before Adkit
Airplay only works with Audio and Video media, therefore, support for this feature is in Rich Media Formats only. No Standard Banners

Known Issues

iOS fires the webkitcurrentplaybacktargetiswirelesschanged event when media is played, despite whether or not it is connected to a separate Airplay device. Because Apple does not provide an API to track if a device is currently connected to another Airplay device, iOS devices may incorrectly report Airplay connection.

Change Log

November 13, 2018

Initial Release