PRODUCT
Follow

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

airplay1.jpg     airplay2.jpg

  

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

  1. 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>
  2. 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>
  3. 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>  
  4. 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

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.

 

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.

Requirements Checklist

  1. Requires Adkit, will not work with EBLoader only - learn more aout Adkit
  2. Video Tracking requires the EB Video Module, add the include before Adkit
  3. 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
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments