html - 带有自定义 html5 控件的 Airplay

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 媒体创建自定义控件。使用 SafariWebKitPlaybackTargetAvailabilityEvent来检测 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();
        });
    });
}

Answer 2

遗憾的是，Apple 尚未实现 Airplay JavaScript 事件调用，这主要是因为当您在本机 quicktime 控件中使用 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 事件来捕捉关闭播放设备：

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