Javascript 在mobile safari中单击事件未通过youtube iframe触发

我想在youtube iframe视频上方放置交互控件，我只需添加

wmode=opaque

作为参数，然后将元素绝对放置在iframe上方，就可以让它正常工作

我的问题是，在mobile safari上，这些控件首先工作正常，但当我从全屏视频返回时，它们都被禁用。但它在桌面上运行良好

HTML基本上是：

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

点击我

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

如需演示，请使用您的移动safari访问此小提琴：

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

如果电影是使用

标签嵌入的，我可以收听全屏结束事件并做一些事情，但现在我被卡住了

---

这是小提琴：

如果不能用正规的iFrAm来处理它，你可能想考虑使用MediaEntEng.js——它可以在HTML5媒体API包装器中封装YouTube API。这在ios上的safari上运行得很好-请访问mediaelementjs.com

您只需添加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>

如果你想把你的按钮添加到mejs播放器的顶部，它会工作的很好，只需将z索引设置得足够高。如果你想要一个普通的播放按钮，你也可以考虑使用Mejs来设置现有的一个按钮。在这种情况下，您必须从以下位置进行更改：

document.getElementById('btn').onclick = function() {
    alert('clicked');
}

对于类似这样的内容（）：

---

所以我试了一下，找到了一个解决办法。有点黑。。。但不是真的。当用户单击视频播放时，

document.activeElement

将成为iframe。当用户单击“完成”按钮时，

document.activeElement===document.body

。因此，当视频开始播放时，我们会定期检查活动元素是否返回到身体。在这一点上，我找到的唯一解决方案是重新绘制iframe。在本例中，我销毁（）视频并使用iframe API重新创建它。我还尝试克隆iframe并成功替换它（我将代码留在那里，以便您可以看到它）：

---

这不是最好的解决方案，但它是有效的。另外，为了解释（我认为）正在发生的事情——iOS劫持任何视频内容（Safari或Chrome），并使用本机视频播放器播放。任何类型的操作系统功能都可以在浏览器上进行，如果你愿意的话，比任何z索引都高。。。完全在浏览器之外。当用户单击“完成”时，本机播放器会缩小，好像它正在页面上重新植入自己。我最好的猜测是，本地玩家仍然在“浏览”浏览器。。。因此，它下面的任何东西都无法接近。按钮似乎在顶部这一事实只是一个反常现象。。。由于缺乏更好的描述。

编辑：Ryan Wheale的解决方案是解决此问题的一个更好的方法，在大多数情况下都有效

从苹果的文档中：

在基于iOS的小屏幕设备上，如iPhone和iPod touch，视频始终以全屏模式播放，因此画布不能叠加在播放视频上。在基于iOS的大屏幕设备（如iPad）上，您可以在播放视频时叠加画布图形，就像在桌面上一样

“播放的视频也同样如此。明确表示这是不可能的

解决方法： 您可以在

webkitfullscreenchange

上分离并重新附加iframe元素。但它不适用于外部

iframe

。浏览器将不允许您操作iframe DOM bec。跨域策略的定义。即使它这样做了，你也只能隐藏视频覆盖来达到你的按钮

因此，唯一的解决方案是通过查看YT.PlayerState.ENDED状态，然后销毁并重新创建播放器。但别担心，它演奏得很流畅

---

以下是。

我不在我的开发电脑旁，但我有个主意。我以前也遇到过类似的问题（iOS上的绝对位置、iFrame等）。我们发现的最奇怪的解决方案是向clickable元素（按钮）添加CSS转换。我们添加了一个没有任何作用的转换（如旋转0）。然而，我们并不是在youtube iFrame上这样做的。如果我回到我的开发机器，而这个机器仍然打开，我会看一看。我不会说它们被禁用了。他们只是不再开火了。如果检查按钮，可以看到事件已附加，且按钮未禁用。看起来像是iOS错误。我以前也遇到过类似的问题。看起来，由于mobile safari中的所有视频都是本机处理的，因此本机覆盖的不幸后果是“吃掉”触摸事件，而不是将它们传递到下面的DOM。我还没有找到一个解决方法，只是在我的iPhone上试过，同样的问题。我很好奇是否有人知道解决方案。我确信您已经尝试过在

iframe

上更改

z索引。当您使用旧的youtube嵌入代码-
时会怎么样？运气好吗？这是一个非常好的解决方案，您还可以保存第二个视频，并在重新创建播放器时使用它，以提供暂停的感觉。“结束”事件仅在视频结束时触发。在视频结束之前，用户会多次单击“完成”。。。即使他们观看整个视频并在视频实际结束前1秒单击“完成”。我的解决方案可以处理用户单击“完成”按钮（全屏退出）的任何时间。你说得对。另外，我重新检查了文档，实际上状态2是暂停，0是结束。叠加按钮以这种方式工作，但它会在暂停时销毁视频。我想你的独奏曲
document.getElementById('btn').onclick = function() {
    alert('clicked');
}

$('#btn').on('click tap touchstart', function() {
    alert('clicked');
});

window.onYouTubeIframeAPIReady = function () {
    var video = {
        player: null,
        create: function () {
            // first destroy if we already have the player
            if (video.player) { video.player.destroy(); }
            // create the player
            video.player = new YT.Player('ytp', {
                videoId: '9u_hp7zPir0',
                width: '620',
                height: '290',
                events: {
                    'onStateChange': video.onStateChange
                }
            });
        },
        onStateChange: function (event) {
            // YT.PlayerState.ENDED » exiting full screen
            if (event.data === 0) { video.create(); }
        }
    };
    video.create();
};