Airplay with html5 user controls

Question

Does anyone know if there is a way to get Airplay to work on html5 video using CUSTOM CONTROLS? This is an important part, I understand that you can simply add the x-webkit-airplay = "allow" attribute to the element if you use the html5 built-in controls. But my video player uses custom controls.

It seems like Safari will put the Airplay button on the html5 inline controls, but is there a way to do this if I don't use the inline controls? Here is the link to the html5 player that I wrote. Please note that the controls below are mine:

http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security

Thanks!

Answer 1

Good news is here! This feature is implemented in Safari 9.

Safari 9.0 lets you create custom controls for your HTML5 environment with JavaScript AirPlay. Use Safari WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability, and then add your own controls for streaming audio and video to AirPlay devices.

Via What's New in Safari 9

Here is an example from HTML5 video and a button for AirPlay

 // Detect if AirPlay is available // Mac OS Safari 9+ only if (window.WebKitPlaybackTargetAvailabilityEvent) { video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) { switch (event.availability) { case "available": AirPlayButton.show(); break; default: AirPlayButton.hide(); } AirPlayButton.on('click', function() { video.webkitShowPlaybackTargetPicker(); }); }); } 

Answer 2

Unfortunately, Apple did not implement event calls in Airplay JavaScript, this is mainly because when you use AirPlay in your own quick time commands, AirPlay prompts the user to get closer to AirPlay devices. Currently, there is no Safari-specific JS implementation and button creation based on the ones available to implement this data in your content.

Starting in February 2013, the only thing you can specify for AirPlay in HTML5 is that you want to show or not display AirPlay controls.

https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html

You can indicate an error with Apple if this is a feature that you would like to use in future versions: https://bugreport.apple.com/

Hope this helps.

Answer 3

We can check the webkitcurrentplaybacktargetiswirelesschanged event to catch the shutdown of the broadcast device:

  this.on(videoEl, 'webkitcurrentplaybacktargetiswirelesschanged', this.checkWireles);