youtube - 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>