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.
Demo
The following table provides links to the demo for the Airplay ad feature.
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
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
- Initial Release
Comments