【问题标题】: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);
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-12-27
        相关资源
        最近更新 更多