YouTube IFrame API 并不总是加载？

Question

我见过很多与此类似的问题，但我认为这是不同的。当我尝试在全局范围内定义 onYouTubeIframeAPIReady 时，该函数仅在我加载页面的一半时间被调用（如果我不断刷新，有时我会看到控制台消息，有时它不存在).令我感到困惑的是，这种情况有时只会发生，而且我不会在代码中的其他任何地方调用 onYouTubeIframeAPIReady。

我检查过的问题区域：

我运行它在 Github 页面上（所以它不是本地的）
函数在全局范围内定义

我的代码如下：

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
}

Answer 1

你忘记了最后的分号：

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
};

Answer 2

这听起来很可疑，就像您是通过 DOM 标记中的 src 属性加载 API 库，而不是建议的将其动态添加到 DOM 的方法在页面加载之后，或者您在创建播放器对象所针对的 DOM 元素之前加载库...因为 onYouTubeIframeAPIReady 函数会在库加载自身，这种可能性总是存在的，如果你尝试通过标签上的 src 属性加载库，它会在你的函数实际注册之前或之前（在这种情况下）加载并调用函数 'player' 元素存在于 DOM 中。工作代码看起来像这样（放置在页面底部附近......绝对低于您尝试创建 iframe 的元素）：

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

 var player;
 window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { 
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
 };
</script>

如果我错了，并且是您加载库的方式，那么您需要在 Chrome Dev Tools 或 firebug 以查看与 DOM 元素存在时间相关的库加载时间。

YouTube IFrame API 并不总是加载？

YouTube IFrame API doesn't always load?

javascript

youtube-api

youtube-javascript-api