Airplay与自定义html5控件

Question

有没有人知道是否有办法让Airplay在使用CUSTOM CONTROLS的html5视频上工作？这是重要的部分,我意识到如果你使用内置的html5控件,你可以只添加x-webkit-airplay ="allow"属性.但我的视频播放器使用自定义控件.

似乎Safari会将Airplay按钮放在内置的html5控件上,但如果我不使用内置控件,有没有办法做到这一点？这是我写的html5播放器的链接.请注意底部的控件是我自己的:

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

谢谢!

Answer 1

这里好消息!该功能已在Safari 9中实现.

Safari 9.0允许您使用JavaScript AirPlay支持为HTML5媒体创建自定义控件.使用Safari WebKitPlaybackTargetAvailabilityEvent来检测Airplay的可用性,然后添加自己的控件,用于将音频和视频流式传输到AirPlay设备.

通过.Safari 9中有什么新功能

以下是来自HTML5视频икнопкадля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();
        });
    });
}