Question

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

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

Try to run above code on I-pad.

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

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

Answer 1

在Iphone / Ipad上的iOS7中，youtube视频使用操作系统嵌入式视频播放器播放，大多数时候它会覆盖默认的html5播放器和所有自定义设置。这就是为什么你无法在手机上看到注释和广告。

Answer 2

我想出了一种实现单击播放的方法（但我没有使用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);
         }
     });

});

在I-pod / I-phone设备上无法点击you-tube视频上的叠加图像

2 个答案: