javascript - YouTube Player API无法完全加载？

Question

我有一个使用YouTube Player API的网页。我是，而不是，遇到了从未调用YouTubeIframeAPIReady()上的问题。它肯定被称为。相反，当调用该函数时，YouTube API并未完全加载。当我尝试在该方法中创建播放器实例时，这会导致构造器异常“yt.player不是构造器”，因为 YT.Player 尚未定义。如果检查YT对象的状态，就会发现它确实存在，但是它的顶级属性显示了这些值:

{loading: 1, loaded: 0, ready: ƒ, setConfig: ƒ}

如您所见，加载 的字段仍为TRUE(等于1)，而加载 的字段仍为FALSE(等于0)。

出于绝望，我从下面更改了代码:

  function onYouTubeIframeAPIReady()
    {
        console.log("onYouTubeIframeAPIReady() called.");

        player = new YT.Player('player', 
        {
            height: '390',
            width: '640',
            videoId: "i8MOJho5TDs"
            events: 
            {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    } // function onYouTubeIframeAPIReady() 

对于使用时间间隔来轮询已加载 的字段的TRUE(等于1)值的版本。如果不是TRUE，则使用以下代码设置新的时间间隔，以在100毫秒后重试:

   function createYouTubePlayer()
    {
        if (!YT.loaded)
        {
            console.log('YouTube Player API is still loading.  Retrying...');
            setInterval(createYouTubePlayer, 100);
            return;
        } // if (!YT.loaded)
        console.log('YouTube Player API is loaded.  Creating player instance now.');

        player = new YT.Player('player', 
        {
            height: '390',
            width: '640',
            videoId: "i8MOJho5TDs", // 'M7lc1UVf-VE',
            events: 
            {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onYouTubeIframeAPIReady()
    {
        console.log("onYouTubeIframeAPIReady() called.");

        setInterval(createYouTubePlayer, 100);
    } // function onYouTubeIframeAPIReady() 

这是加载YouTube API的函数。它是从HTML文档的 HEAD 部分中的 脚本标记调用的:

   // This function initialize the YouTube IFrame Player API.
    function initializeYouTubePlayerAPI()
    {
        // Load the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

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

        console.log("YouTube Player API load initiated.");
    }

不幸的是，这种方法无济于事，因为YouTube API YT对象的 加载的属性从不会更改为TRUE(等于1)。因此，在代码等待YouTube Player API完全加载时，我看到一连串的控制台消息，显示无休止的重试。

现在有人有人为什么这样做或如何解决吗？

请注意，如果问题是由于来自Chrome扩展程序的干扰，我确实在Chrome的隐身模式下尝试了此操作。那没有帮助，所以我不认为这是问题所在。

Answer 1

我发现自己犯了一个简单的错误。我忘记在页面顶部包含此Javascript文件:

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>