Question

Google最近几天改变了一些东西，所以我在移动游戏中将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() {

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

我通常通过这种方式解决这个问题，以创建一个函数＆＃39; class＆＃39;使用标记创建者和事件监听器，并在document.ready函数中创建对象。然后就在我放的document.ready函数的正下方。

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

myVideo＆＃39;是我创建的类和apiReady（）;包含的内容。

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

我希望这会有所帮助。

嵌入式Youtube在隐藏时不会加载到移动版Safari中

1 个答案: