javascript - 单击事件不会在移动 safari 中通过 youtube iframe 触发

Question

我想在 youtube iframe 视频上方放置交互控件，我通过添加 wmode=opaque 使其工作正常作为参数，然后将元素绝对定位在 iframe 之上。

我的问题是，在移动版 Safari 上 - 控件首先工作正常，但当我从全屏视频返回时，它们都被禁用了。不过它在桌面上运行良好。

HTML 基本上是:

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

然后按钮绝对定位在 iframe 之上。

如需演示，请使用移动浏览器访问此 fiddle :http://jsfiddle.net/SwGH5/embedded/result/

您会看到该按钮在单击时会产生警报。现在，播放视频并单击“完成”。然后尝试再次单击按钮...

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

这是 fiddle :http://jsfiddle.net/SwGH5

Answer 1

所以我玩弄了 iframe API有点，找到了解决办法。这有点hacky ...但不是真的。当用户点击视频播放时，document.activeElement 成为 iframe。当用户单击“完成”按钮时，document.activeElement === document.body。因此，当视频开始播放时，我们会定期检查事件元素是否返回到主体。那时，我找到的唯一解决方案是重绘 iframe。在示例中，我 destroy() 视频并使用 iframe API 重新创建它。我还尝试克隆 iframe 并将其替换为成功(我将该代码留在那里以便您可以看到它):

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

这不是最好的解决方案，但它确实有效。此外，为了解释 [我认为] 正在发生的事情 - iOS 劫持任何视频内容(Safari 或 Chrome)并使用 native 视频播放器播放。如果您愿意，任何类型的操作系统功能都会在浏览器“之上”发生——高于任何 z-index……完全在浏览器之外。当用户单击“完成”时， native 播放器会缩小，就好像它正在将自己重新植入页面上一样。我最好的猜测是 native 播放器仍在浏览器“上方”闲逛……因此无法访问其下方的任何内容。按钮显示在顶部的事实只是一种异常现象……因为缺乏更好的描述。