Question

我有一个使用YouTube播放器API的网页。我不从未调用过 onYouTubeIframeAPIReady（）的问题。它肯定被称为。相反，当调用该函数时，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()

使用Interval轮询已加载字段获取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>

YouTube Player API永远不会完全加载？

1 个答案: