Javascript事件监听器从监听中退出(？)… Youtube API

编辑 – 2016-06-25
(我删除了我的6月16日更新,因为不再相关.
我把OP留在了……)

今天我又花了4个小时.
这是现在的情况：

我的函数适用于两个链接.
视频参数在数组中定义.
另外两个链接不起作用.

我得到一个Uncaught TypeError：thisPlayer.loadVideoById不是链接#3和#4的函数.
但是相同的功能对链路#1和#2有效.

似乎youtube对象仅为两个第一个定义.
为什么？

请关闭此实时链接上的控制台：https://www.bessetteweb.com/?p=youtube-video-test
我插入了很多console.log消息来说清楚.

这是我的实际代码：

// Global variable for the player
var player = [];
var statePlaying=false;

playerArr = [{
            linkID:"link0",divID:"player1",ytID:"5V_wKuw2mvI",// Heavy Metal playlist
            start:20,end:30
            },{
            linkID:"link1",divID:"player2",ytID:"u9Dg-g7t2l4",// disturbed
            start:10,end:20
            },{
            linkID:"link2",divID:"player3",ytID:"39b5v3-d6ZA",// Maiden
            start:30,end:40
            },{
            linkID:"link3",divID:"player4",ytID:"z8ZqFlw6hYg",// Slayer
            start:120,end:136
            }];

// This function gets called when API is ready to use
function onYouTubePlayerAPIReady() {

    // Binding events loop
    console.log("playerArr.length: "+playerArr.length);
    for(i=0;i<playerArr.length;i++){
        console.log("");
        console.log("onPlayerReady for loop ->i: "+i);

        var playButton = document.getElementById(playerArr[i].linkID);
        console.log("playButton.id: "+playButton.id);

        var thisArr = playerArr[i];
        console.log("playerArr[i] object (below): ");
        console.log(thisArr);

        playButton.addEventListener("click",function() {
            thisLinkID = $(this).attr("id").replace("link","");

            console.log("");
            console.log("------------------");
            console.log("Link #"+(parseInt(thisLinkID)+1)+" clicked.");
            console.log("------------------");

            var ytID = playerArr[thisLinkID].ytID;
            var start = playerArr[thisLinkID].start;
            var end = playerArr[thisLinkID].end;

            var thisPlayer = new YT.Player(playerArr[thisLinkID].divID);

            console.log("ytID: "+ytID);
            console.log("start: "+start);
            console.log("end: "+end);
            console.log("");

            console.log("Below are the google ads,blocked by AdBlocker.");

            $("#ytplayerModal").css({"display":"block"});
            $("#ytplayerModal").animate({"opacity":"0.7"},1000,function(){

                console.log("");
                console.log("player show()");
                $(".ytplayer").show();

                console.log("Youtube player object:");
                console.log(thisPlayer);
                console.log("");
                console.log('loadVideoById() parameters --\> videoId:'+ytID+',startSeconds:'+start+',endSeconds:'+end);

                thisPlayer.loadVideoById({'videoId':ytID,'startSeconds':start,'endSeconds':end});
                console.log("");
            });

            // Bugfix - Set Interval instead of listener
            setTimeout(function(){
                var IntervalCounter=0;
                listenerInterval = setInterval( function() {

                    var state = thisPlayer.getPlayerState();    //player[thisLinkID].getPlayerState();
                    var stateMsg;

                    switch (state){
                        case -1: stateMsg="unstarted"; thisPlayer.playVideo(); console.log("player["+thisLinkID+"]"); break;
                        case  0: stateMsg="ended"; break;
                        case  1: stateMsg="playing"; break;
                        case  2: stateMsg="paused"; break;
                        case  3: stateMsg="buffering"; break;
                        case  5: stateMsg="video cued"; break;
                        default: stateMsg="Undefined player state...";
                    }
                    console.log(state+" : "+stateMsg);

                    if(state==1){
                        statePlaying=true;
                    }

                    // Closes the modal
                    if((statePlaying) && (state==0)){
                    //if((statePlaying) && (stateObj.data==0)){
                        setTimeout(function(){
                            console.log("Closing Modal");
                            $(".ytplayer").css({"display":"none"});
                            $("#ytplayerModal").animate({"opacity":"0"},function(){
                                $("#ytplayerModal").css({"display":"none"});
                            });
                            statePlaying=false;
                        },500);
                        clearInterval(listenerInterval);
                        console.log("Interval loop stopped on video end.")
                    }

                    // Stop the interval at 1000... Endless instead!
                    IntervalCounter++;
                    if((IntervalCounter>999)&&(state!=1)&&(state!=2)&&(state!=0)){
                        clearInterval(listenerInterval);
                        console.log("Interval loop willingly stopped. Endless otherwise.")
                    }
                },10);
            },1100);    // Interval setTimeout
        });
    }
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);

这是我的控制台日志的快照：

—————–
这是我原来的帖子 – 6月14日：

我已经花了6个小时.
(加1编辑这个问题！)

我有点调试它的最后4行.

问题是我得到没有控制台错误的提示.

概念：
我想将许多Youtube视频链接到文本链接.
用户想要的效果是能够在阅读文本时点击引文链接…以便能够确认引文.
该视频无法完全播放.

视频应以特定时间码开始,并以特定时间码结束.
奖金复杂性：所有这些都希望以模态视图样式显示.

对于一个视频,我的代码工作得非常快. See here.

我的代码基于this tutorial并且快速成功.

然后,这个工作……
我需要构建数组来处理多个视频.
对于链接ID,玩家ID,开始/结束的时间码……和听众！
好玩开始了！

就像说的那样,我大部分时间都花在这上面.
我总是遇到错误控制台错误作为清除(LOLLL)指南.

我对自己的工作感到满意……我认为这是正确的方向.
这几乎正在……

但这一次,没有错误！ See here.(检查控制台！)

热点问题研究！没有错误？！？
我的手臂现在被砍掉了.
事实上,第一个节目,但视频没有开始……而第二个看起来完全迷失在阴霾中.

在控制台日志消息中,我看到onStateChange监听器的第一次出现,即-1(未启动).但是之后？？？它死了！
Arrgg！

我必须超越自己的骄傲……并将其作为StackOveflow上的一个问题.

Javascript事件监听器从监听中退出(？)… Youtube API – 没有控制台错误

相关文章