javascript - 隐藏时，嵌入 Youtube 不会在移动 Safari 上加载

Question

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

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

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

希望对您有所帮助。