点击事件不会触发移动版Safari中的youtube iframe

Question

我想将交互控件放在youtube iframe视频上方,只需添加wmode=opaqueas参数然后将元素置于iframe上方,我就可以正常工作了.

我的问题是在移动设备上 - 控件首先工作正常,但是当我从全屏视频返回时,它们都被禁用了.它在桌面上工作正常.

HTML基本上是:

<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>

然后按钮位于iframe上方的绝对位置.

有关演示,请使用您的移动游览来访问此小提琴:http://jsfiddle.net/SwGH5/embedded/result/

您会看到该按钮在单击时会发出警报.现在,播放视频并单击"完成".然后尝试再次单击该按钮...

如果电影是使用<video>标签嵌入我可以听全屏结束事件并做一些事情,但现在我被卡住了......

这是小提琴:http://jsfiddle.net/SwGH5

Answer 1

所以我玩了一下iframe API并找到了解决方案.这有点hacky ......但不是真的.当用户点击视频进行播放时,将document.activeElement成为iframe.当用户点击"完成"按钮时,document.activeElement === document.body.因此,当视频开始播放时,我们会定期检查活动元素是否返回到正文.那时,我找到的唯一解决方案是重绘iframe.在示例中,我销毁()视频并使用iframe API重新创建它.我也尝试克隆iframe并将其替换为成功(我将代码保留在那里以便您可以看到它):

http://jsfiddle.net/ryanwheale/SwGH5/105/

这不是最好的解决方案,但它确实有效.此外,为了解释[我认为]正在发生的事情 - iOS劫持任何视频内容(Safari或Chrome)并使用原生视频播放器播放.任何类型的操作系统功能都会在浏览器"上方"发生 - 比任何z-index更高......完全在浏览器之外.当用户点击"完成"时,原生播放器类型会缩小,就像它在页面上重新植入一样.我最好的猜测是,原生播放器仍然在浏览器上"悬空"...因此使其下面的任何东西都无法访问.按钮看起来在顶部的事实只是一个异常......因为缺乏更好的描述.

Answer 2

如果您无法让它与常规 iframe 一起使用，您可能需要考虑使用 mediaelement.js - 它可以将 Youtube API 包装在 HTML5 Media API 包装器中。这在 ios 上的 safari 上运行良好 - 尝试mediaelementjs.com 上的Youtube 示例。

您需要做的就是添加 mejs js/css 并将您的 YouTube 视频作为视频标签中的源，以下是取自 mediaelementjs.com 的一些示例标记：

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

然后像这样启动播放器：

jQuery(document).ready(function($) {
    $('#player1').mediaelementplayer();
});

如果您想将按钮添加到 mejs 播放器顶部，只需将 z-index 设置得足够高即可。如果您想要一个常规的播放按钮，您还可以考虑对 mejs 附带的现有按钮进行样式设计。