点击事件未触发移动版Safari中的youtube iframe [英] Click event not triggering over youtube iframe in mobile safari

问题描述

我想将交互控件放置在youtube iframe视频上方，只需添加wmode=opaque作为参数，然后将元素绝对放置在iframe上方，即可使其正常运行.

I’d like to place interaction controls above a youtube iframe video, and I got it working quite OK by just adding wmode=opaque as arguments and then position the elements absolute above the iframe.

我的问题是在移动浏览器上-控件先运行正常，但是当我从全屏视频返回时，它们全部被禁用.不过，它在台式机上可以正常工作.

My problem is that on mobile safari - the controls work fine first, but when I return from the fullscreen video, they are all disabled. It works fine on desktop though.

HTML基本上是:

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

然后将按钮绝对定位在iframe上方.

And then the button is positioned absolute above the iframe.

有关演示，请使用移动浏览器访问此小提琴: http://jsfiddle.net/SwGH5/embedded/result /

For a demo, please visit this fiddle using your mobile safari: http://jsfiddle.net/SwGH5/embedded/result/

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

You’ll see that the button yields an alert when clicked. Now, play the video and click "done". Then try to click the button again...

如果电影是使用<video>标记嵌入的，我可以收听全屏结束事件并执行某些操作，但现在我陷入了困境...

If the movie was embedded using the <video> tag I could listen for a fullscreen-end event and do something, but now I’m stuck...

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

推荐答案

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

So I played around with the iframe API a bit and found a solution. It's kind of hacky... but not really. When a user clicks on the video to play it, the document.activeElement becomes the iframe. When the user clicks the "done" button, the document.activeElement === document.body. So when the video starts playing, we periodically check to see if the active element returns to the body. At that point, the only solution I found was to redraw the iframe. In the example, I destroy() the video and recreate it using the iframe API. I also tried cloning the iframe and replacing it with success (I left that code there so you could see it):

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

这不是最佳解决方案，但它可以工作.另外，为了解释[我认为]发生了什么-iOS会劫持任何视频内容(Safari或Chrome)，然后使用本机视频播放器播放.像这样的任何类型的OS功能都将发生在浏览器上方"，如果您愿意-高于任何z-index ...完全在浏览器之外.当用户单击完成"时，本机播放器就会缩小，就像它正在重新植入页面一样.我最好的猜测是，本机播放器仍在浏览器上方"闲逛……因此无法访问其下方的任何内容.该按钮似乎位于顶部的事实只是一个异常……缺乏更好的描述.

It's not the best solution, but it works. Also, to give an explanation of what [I think] is happening - iOS hijacks any video content (Safari or Chrome) and plays it using the native video player. Any type of OS functionality like this takes place "over" the browser if you will - higher than any z-index... completely outside the browser. When the user clicks "done" the native player kind of zooms out as if it is re-implanting itself on the page. My best guess is that the native player is still hanging out "over" the browser... thus making anything underneath it inaccessible. The fact that the button appears to be on top is just an anomaly... for lack of better description.

这篇关于点击事件未触发移动版Safari中的youtube iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！