JS YouTube Embed 交换在不同 iOS 版本上不一致答案

【问题标题】：JS YouTube Embed swap inconsistent over different iOS versionsJS YouTube Embed 交换在不同 iOS 版本上不一致
【发布时间】：2010-12-30 19:18:41
【问题描述】：

所以我正在开发一个包含一些视频的移动网站。我使用提供的 YouTube API 在不同设备上切换 flash 和 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 中，视频根本不显示，但在图像隐藏时会在页面上留下巨大的空白区域。

它在所有桌面浏览器上都运行良好，因此调试这是一个问题。

感谢任何帮助！蒂亚！

编辑：播放器必须处于自动播放状态才能在 1 次点击时进行交换，因此它必须以 display:none 开始在页面上。

另外，容器会导致这个问题吗？它目前在页面上的 <span> 内呈现，在 display:none 之前没有设置 display:block。

【问题讨论】：

标签： javascript iphone mobile-safari youtube-api

【解决方案1】：

尝试通过将视频放置在屏幕外而不是使用display=none 来隐藏视频。这是解决此类问题的经典方法。

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

然后你可以用

来“展示”它

video.style.position = 'static'

【讨论】：

遗憾的是，这行不通，因为播放器必须处于自动播放状态才能让用户不必点击两次，因此无法将其定位在页面之外。如果在 3G 上，我会避免在页面加载时加载播放器以节省带宽和用户的数据计划。不过感谢您的建议。

【解决方案2】：

由于自动播放在 4.2 中不起作用，我们决定取消缩略图交换。没有一种适用于所有 iOS 版本的方法。所以我们只是使用一些 youtube 生成的缩略图。

【讨论】：