在 U 管视频上叠加图像在 I-pod/I-phone 设备上不可点击

Overlay image over a you-tube video is not clickable on I-pod/ I-phone devices

本文关键字：I-phone I-pod 视频 叠加 图像      更新时间：2023-09-26

我们正在开发youtube iframe API，其中我们在视频上有一个叠加图像。通过单击此图像，用户可以跳过整个视频。但是，当视频运行时，图像在I-pad/I-phone设备上不可单击。

我为此构建了一个小演示：

http://jsfiddle.net/nKqAQ/2/

Try to run above code on I-pad.

最初图像是可点击的，但是，当视频开始时，图像不会被点击。相反，视频被放大/缩小。

有没有办法为定位在iPhone/iPad上正在运行的视频上的图像触发点击事件？

在 iPhone/Ipad 上的 iOS7 中，YouTube 视频使用操作系统嵌入式视频播放器播放，大多数情况下它会覆盖默认的 html5 播放器和所有自定义设置。这就是为什么您无法在移动设备上看到注释和广告的原因。

我想出了一种实现一键播放的方法（但是我没有使用 iFrame API）。 这不是最漂亮的解决方案，但似乎有效。

基本上，我在YouTube视频iFrame下方放置了"漂亮的图像"，并在准备好的文档上将视频的不透明度设置为零。 然后，我有确定鼠标何时在 iFrame 上的代码，以及添加到 window.blur 事件的代码（当用户在 iFrame 中单击时发生）。

如果用户点击iFrame（包含YouTube视频），我将视频的不透明度更改为1。

.HTML：

<div class="pretty-graphic" style="opacity: 0;">
    <iframe class="video" id="youTubeVideo" style="position: absolute; top: 0; left: 0; height: 450px; display: block;" src="some url" allowfullscreen="" frameborder="0"></iframe>
</div>

注意：我有CSS，其中包含父潜水中450px高图像的背景图像内容。

JavaScript：

$(document).ready(function () {
    $("#youTubeVideo").css('opacity', 0);
    $("#youTubeVideo").height($(".pretty-graphic").height());
    $("#youTubeVideo").width($(".pretty-graphic").width());
    var overiFrame = -1;
    $('iframe').hover(function () {
        overiFrame = 1;
     }, function () {
        overiFrame = -1
     });
     $(window).blur( function() {
         if ( overiFrame != -1 ) {
             $("#youTubeVideo").css('opacity', 1);
         }
     });
});
相关文章：