YouTube Player API 从未完全加载？答案

【问题标题】：YouTube Player API never fully loads?YouTube Player API 从未完全加载？
【发布时间】：2017-11-15 23:40:10
【问题描述】：

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

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

如您所见，loading 字段仍为 TRUE（等于 1），loaded 字段仍为 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()

对于使用间隔轮询 loaded 字段以获取 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 部分中的 script 标记调用的：

   // 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 对象的 loaded 属性永远不会更改为 TRUE（等于 1）。因此，当代码等待 YouTube 播放器 API 完全加载时，我看到控制台消息流显示了无休止的重试。

现在有人知道为什么会发生这种情况或我该如何解决吗？

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

【问题讨论】：

标签： javascript api youtube youtube-api youtube-iframe-api

【解决方案1】：

原来我犯了一个简单的错误。我忘了在我的页面顶部包含这个 Javascript 文件：

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

【讨论】：