javascript - 隐藏时，嵌入的 Youtube 无法在移动 Safari 上加载

Question

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

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

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

我希望这有帮助。