Airplay with Custom html5 controls

Question

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

It appears that Safari will put the Airplay button on the built in html5 controls, but is there a way to do it if I'm not using the built in controls? Here is a link to the html5 player I've written. Notice that the controls at the bottom are my own:

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

Thanks!

Answer 1

Good news here! The feature has been implemented in Safari 9.

Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's 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's an example from HTML5 video и кнопка для 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

Sadly Apple hasn't implemented Airplay JavaScript event calls, this is mostly because when you use AirPlay in your native quicktime controls AirPlay prompts the user with near by AirPlay devices. Currently there isn't a Safari specific JS implementation to pull this data in your content and create buttons based on what's available.

As of Feb 2013, the only thing you can specify for AirPlay in HTML5 is if you wish to show or not show AirPlay controls.

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

You can file a bug with Apple if this is a feature you would like in future releases: https://bugreport.apple.com/

Hope this helps.

Answer 3

We can check webkitcurrentplaybacktargetiswirelesschanged event to catch switch off airplay device:

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