Question

我想将交互控件放在youtube iframe视频上方，只需添加wmode=opaque作为参数，然后将元素绝对放在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

编辑： Ryan Wheale的解决方案是解决此问题的更好方法，并且在大多数情况下都可以使用。

来自Apple的文档：

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

同样适用于＆＃34; 播放视频＆＃34;无论是。 This article明确指出它是不可能的。

解决方法：

您可以在webkitfullscreenchange上分离并重新附加iframe元素。但它不会为外国人iframe工作。浏览器不允许您操纵iframe DOM。跨域政策。即使它确实如此，您也只能隐藏视频叠加层才能到达您的按钮。

~~因此，唯一的解决方案是通过 YouTube iFrame API 观看 YT.PlayerState.ENDED 状态，然后销毁并重新创建播放器。但不要担心它会顺利播放。~~

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();
};

~~这是working fiddle。~~

Answer 3

如果您无法使用常规iframe，您可能需要考虑使用mediaelement.js - 它可以将Youtube API包装在HTML5 Media API包装器中。这在ios上的safari上工作正常 - 在mediaelementjs.com上试用Youtube example。

您需要做的就是添加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附带的现有设置。

Answer 4

comments from @CullenJ's answer可能是由iOS device browsers not triggering the click event on iframe elements中的某些问题引起的。在这种情况下，您必须更改：

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

这样的事情（as answered by @smnh）：

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

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

4 个答案:

解决方法：