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

Posted 2023-02-24

【中文标题】YouTube iframe API - onReady 和 onStateChanged 事件未触发

【英文标题】：YouTube iframe API - onReady and onStateChanged events not firing

【发布时间】：2015-01-28 03:06:26

【问题描述】：

在处理 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=”位，因此该修复也不起作用。

【参考方案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>

【讨论】：

感谢您的回复。我尝试了您添加脚本的解决方案，但这次视频根本没有填充。 onYouTubeIframeAPIReady() 函数甚至没有触发。另外，我应该注意你建议的额外参数——虽然我最初没有添加它们，但它们似乎自动添加到 iframe 中。还有其他想法吗？我会继续努力的。

@JoeyBonanza：您是否将onload="LoadYouTubeIframeAPI()" 添加到body 标记中？

我确定了问题！这一行：individ.innerHTML+="<div style='float: left;'><s.. 导致所有问题。不知道为什么——但是替换你的代码并删除它修复了它。我现在将确定为什么该行会导致问题开始。谢谢！

知道了！对于任何想知道的人，在视频完成加载之前向父 div 添加任何内容可能会导致 YT 对象出现问题。在生成播放器之前执行 innerHTML 修复了所有问题。再次感谢！

这些都不适合我。也许有人可以帮忙？ pastebin.com/TDApehGu