带有自定义 html5 控件的 Airplay答案

【问题标题】：Airplay with Custom html5 controls带有自定义 html5 控件的 Airplay
【发布时间】：2012-11-19 06:21:57
【问题描述】：

有谁知道是否有办法让 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

谢谢！

【问题讨论】：

你应该把视频添加到 tutspuls.com 他们很不错

标签： html safari html5-video airplay

【解决方案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();
        });
    });
}

【讨论】：

【解决方案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/

希望这会有所帮助。

【讨论】：

【解决方案3】：

我们可以检查 webkitcurrentplaybacktargetiswirelesschanged 事件来捕捉关闭播放设备：

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

【讨论】：