YouTube iframe API - onReady 和 onStateChanged 事件未触发

Question

在处理 YouTube 的 iFrame API 时，我真的很沮丧。直到昨天一切正常，当我注意到我的 .playVideo() 和 .pauseVideo() 函数抛出“未定义不是函数”错误时。现在，我可以看到我的任何函数似乎都不起作用......事件“onready”和“onstatechange”似乎也没有触发。这是我的代码：

function addVideo(index, url){
                $.getScript('https://www.youtube.com/iframe_api', function(){
                    processPlayer();
                });
                function processPlayer(){

                    var videos = document.getElementById("videos");
                    var individ = document.createElement("div");
                    individ.setAttribute("class", "individ");
                    var vid = document.createElement("div");
                    vid.setAttribute("id","vid"+index);
                    individ.appendChild(vid);
                    videos.appendChild(individ);
                    var player;
                    function onYouTubeIframeAPIReady() {
                        console.log("Are we here at least?");
                        player = new YT.Player('vid'+index, {
                            height: '165',
                            width: '100%',  
                            videoId: url,
                            playerVars: { 'controls': 0, 'showinfo': 0, 'rel': 0},
                            events: {
                                'onReady': onPlayerReady,
                                'onStateChange': onPlayerStateChange
                            }
                        });
                        window.players.push(player);

                        //individ.innerHTML+="Added by "+namesList[index];
                        individ.innerHTML+="<div style='float: left;'><span class='sname'>Let it Burn</span><br/><span class='aname'>Dave Matthews Band</span></div><div style='position: relative;'><img class='s_user' src='http://i.imgur.com/1AmnCp4.png'/></div>";
                        window.players.push(player);
                    }

                    onYouTubeIframeAPIReady();

                    // 4. The API will call this function when the video player is ready.
                    function onPlayerReady(event) {
                        //event.target.playVideo();
                        console.log("We're ready");
                    }

                    // 5. The API calls this function when the player's state changes.
                    //    The function indicates that when playing a video (state=1),
                    //    the player should play for six seconds and then stop.
                    var done = false;
                    function onPlayerStateChange(event) {
                        console.log("HI?");
                        if(event.data === 0) {  
                            if(window.currentIndex < window.players.length-1){
                                var videoID = window.players[window.currentIndex].getVideoUrl().split("v=")[1];
                                window.players[window.currentIndex].cueVideoById(videoID);
                                window.currentIndex++;       
                                window.players[window.currentIndex].playVideo();
                            } 
                        } else if(event.data === 2 ){
                            onYouTubeIframeAPIReady();
                        }
                        if(!window.playing){
                            //alert('playing');
                            window.playing = true;
                        } else {
                            //alert('stopping');
                            window.playing = false;
                        }
                    }
                    function stopVideo() {
                        player.stopVideo();
                    }
                }
            }

任何想法为什么？我真的很感激这方面的一些帮助。视频本身加载良好，并且可以从控制台调用 YTPlayer 对象......但是这些功能不起作用，并且 onready/onstatechange 不会触发。默认情况下，iframe 中有“origin=”位，因此该修复也不起作用。

Answer 1

我在您的代码中发现了几个问题，但我不确定哪一个是困扰您的问题。

首先，您不应该直接致电onYouTubeIframeAPIReady。

相反，您应该执行以下操作并让浏览器异步执行：

var scriptElement = document.createElement("script");
scriptElement.src = "http://www.youtube.com/iframe_api";
var firstScriptElement = document.getElementsByTagName("script")[0];
firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);

其次，我认为你至少应该初始化以下播放器参数：

playerVars:
{
    "enablejsapi":1,
    "origin":document.domain,
    "rel":0
},
events:
{
    "onReady":onPlayerReady,
    "onError":onPlayerError,
    "onStateChange":onPlayerStateChange
}

这是我一直在使用的完整相关代码：

<body onload="LoadYouTubeIframeAPI()">
    <div id="player">Loading Video Player...</div>
    <script type="text/javascript">
        var player = null;
        function LoadYouTubeIframeAPI()
        {
            var scriptElement = document.createElement("script");
            scriptElement.src = "http://www.youtube.com/iframe_api";
            var firstScriptElement = document.getElementsByTagName("script")[0];
            firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);
        }
        function onYouTubeIframeAPIReady()
        {
            var playerParams =
            {
                playerVars:
                {
                    "enablejsapi":1,
                    "origin":document.domain,
                    "rel":0
                },
                events:
                {
                    "onReady":onPlayerReady,
                    "onError":onPlayerError,
                    "onStateChange":onPlayerStateChange
                }
            };
            player = new YT.Player("player",playerParams);
        }
        function onPlayerReady(event)
        {
            ...
        }
        function onPlayerError(event)
        {
            ...
        }
        function onPlayerStateChange(event)
        {
            ...
        }
    </script>
</body>