14

我想将交互控件放在 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 上方。

如需演示，请使用您的移动浏览器访问此小提琴：http: //jsfiddle.net/SwGH5/embedded/result/

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

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

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

4

4 回答 4

6

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

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

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

于 2014-06-27T00:30:36.923 回答
2

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

来自 Apple 的文档：

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

“播放的视频”也是如此。这篇文章明确指出这是不可能的。

解决方法：

您可以将 iframe 元素分离并重新附加到webkitfullscreenchange. 但它不适用于外国人iframe。浏览器不允许您操作 iframe DOM bec。跨域策略。即使是这样，您也只能隐藏视频叠加层才能到达您的按钮。

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

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

这是工作小提琴。

于 2014-06-28T14:34:06.483 回答
0

根据@CullenJ's answer的评论，可能是由于iOS设备浏览器中的一些问题没有触发iframe元素上的点击事件。在这种情况下，您将不得不更改：

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

对于这样的事情（@smnh 回答）：

$('#btn').on('click tap touchstart', function() {
    alert('clicked');
});
于 2014-06-24T15:55:12.250 回答
0

如果您无法让它与常规 iframe 一起使用，您可能需要考虑使用 mediaelement.js - 它可以将 Youtube API 包装在 HTML5 媒体 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 附带的现有按钮设置样式。

于 2013-10-26T09:04:24.390 回答