隐藏时，嵌入 Youtube 无法在移动 Safari 上加载答案

【问题标题】：Embeded Youtubu doesn't load on mobile safari, when hidden隐藏时，嵌入 Youtube 无法在移动 Safari 上加载
【发布时间】：2013-05-16 19:30:49
【问题描述】：

谷歌最近改变了一些东西，所以我在移动 safari 中作为 iFrame 嵌入 Youtube 时遇到了奇怪的问题。当 iFrame 在页面加载期间隐藏（某些父 div 已设置 display:none）并稍后更改为可见时，Youtube 播放器不播放。

有什么解决办法吗？我尝试重新加载 iframe，当它变为可见状态时，它可以工作。但这不是舒服的解决方案……

【问题讨论】：

标签： javascript ios youtube

【解决方案1】：

我假设您正在使用第三方 youtube Iframe API 将 youtube 播放器加载到 div 中。 youtube 的代码实际上有一个竞争条件，如果在调用 onYouTubeIframeAPIReady 之前浏览器未加载/解析 div，则视频加载将失败。在 Firefox 中，它只会挂起一秒钟，而 Chrome 足够聪明，可以处理这个问题。

解决办法是确保这段代码。在解析完包含视频的容器后运行。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

还有这段代码……

function onYouTubeIframeAPIReady() {

具有全局范围并在脚本创建后调用。

我通常解决这个问题的方法是使用标签创建器和事件侦听器创建一个函数“类”，并在我的 document.ready 函数中创建对象。然后就在我放置的 document.ready 函数的正下方。

function onYouTubeIframeAPIReady() {
    myVideo.apiReady();
}

'myVideo' 是我创建的类和 apiReady();包含。

this.apiReady = function () {
    player = new YT.Player('player', {
        height: '548',
        width: '900',
        videoId: 'VIDEO234324',
        events: {
            'onReady': onPlayerReady
        }
    });
}

我希望这会有所帮助。

【讨论】：