1

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

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

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

Try to run above code on I-pad.

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

有什么方法可以触发位于 iPhone/iPad 上正在运行的视频上的图像的点击事件？

4

2 回答 2

0

我想出了一种实现一键播放的方法（但是我没有使用 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，其中包含父级潜水中 450 像素高图像的背景图像内容。

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

});
于 2014-07-22T12:44:29.227 回答
0

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

于 2013-10-23T15:18:40.123 回答