Question

所以我正在开设一个有视频的移动网站。我使用提供的YouTube API在不同设备上切换闪存和HTML5，但出于几个原因我使用自定义缩略图。

我使用一些javascript隐藏YouTube iframe，直到用户点击图片，然后它应该替换视频onClick的图像，调用switchItUp方法。

        var video = document.getElementById("VideoID");
        var image = document.getElementById("PlaceholderImage");
        video.style.display = "none";

        function switchItUp() {
            var video = document.getElementById("VideoID");
            var image = document.getElementById("PlaceholderImage");
            image.style.display = "none";
            video.style.display = "block";
        }

API指定的YouTube代码如下（仅在页面上时有效）：

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe>

这是有趣的部分。

这在Safari 4.0版中效果很好。
在4.1中，onClick显示视频，但您无法播放。
在4.2中，视频根本没有显示，但在图像隐藏时会在页面上留下一个巨大的空白区域。

它适用于所有桌面浏览器，因此调试这是一个问题。

任何帮助表示赞赏！ TYIA！

编辑：播放器必须处于自动播放状态才能使交换工作1次点击，因此必须在页面上以display：none开头。

此外，容器会导致此问题吗？它当前正在页面上的<span>内进行渲染，没有display：block set before display：none。

Answer 1

尝试通过将视频放在屏幕上而不是使用display=none来隐藏视频。对于这类问题，这是一个经典的工作。

video.style.position = 'absolute';
video.style.top = '-10000px';
video.style.left = '-10000px';

然后你可以用

“显示”它

video.style.position = 'static'

Answer 2

由于自动播放在4.2中不起作用，我们决定摆脱缩略图交换。没有办法在所有iOS版本中都能运行。所以我们只是使用一些youtube生成的缩略图。

JS YouTube在不同的iOS版本上嵌入交换不一致

2 个答案: