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设备。

经。 What's New in Safari 9

以下是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

可悲的是Apple还没有实现Airplay JavaScript事件调用，这主要是因为当您在原生快速时间控件中使用AirPlay时，AirPlay会提示用户靠近AirPlay设备。目前没有一个特定于Safari的JS实现来在您的内容中提取这些数据并根据可用的内容创建按钮。

截至2013年2月，您可以在HTML5中为AirPlay指定的唯一内容是，如果您希望显示或不显示AirPlay控件。

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

如果您希望在以后的版本中使用此功能，则可以向Apple提交错误： https://bugreport.apple.com/

希望这有帮助。

Answer 3

我们可以检查webkitcurrentplaybacktargetiswirelesschanged事件以关闭关闭airplay设备：

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

Airplay与自定义html5控件

3 个答案: