YouTube IFrame API不能总是加载吗？

Question

我已经看到很多与此类似的问题，但是我相信这是不同的。当我尝试onYouTubeIframeAPIReady在全局范围内定义时，该函数仅在加载页面的一半时间被调用（如果我不断刷新，有时会看到控制台消息，有时则不存在）。令我感到困惑的是，这种情况仅在某些时候发生，并且我onYouTubeIframeAPIReady在代码中未调用其他任何地方。

我检查过的问题区域：

• 我正在Github Pages上运行它（因此它不是本地的）
• 该函数在全局范围内定义

我的代码如下：

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

这听起来令人怀疑，就像您是通过DOM标签中的src属性加载API库，而不是建议的在页面加载后将其动态添加到DOM或在DOM之前加载库的建议方式一样已经创建了播放器对象所针对的元素...因为在库自身加载后就会立即调用onYouTubeIframeAPIReady函数，因此，如果您尝试通过标签上的src属性加载库，则始终存在这种可能性在实际注册功能之前或在DOM中存在（在这种情况下）“ player”元素之前，请加载并调用该功能。工作代码如下所示（放置在页面底部附近……绝对在您要创建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元素何时存在有关。