编辑 – 2016-06-25
(我删除了我的6月16日更新,因为不再相关.
我把OP留在了……)
(我删除了我的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视频链接到文本链接.
用户想要的效果是能够在阅读文本时点击引文链接…以便能够确认引文.
该视频无法完全播放.
视频应以特定时间码开始,并以特定时间码结束.
奖金复杂性:所有这些都希望以模态视图样式显示.
我的代码基于this tutorial并且快速成功.
然后,这个工作……
我需要构建数组来处理多个视频.
对于链接ID,玩家ID,开始/结束的时间码……和听众!
好玩开始了!
就像说的那样,我大部分时间都花在这上面.
我总是遇到错误控制台错误作为清除(LOLLL)指南.
我对自己的工作感到满意……我认为这是正确的方向.
这几乎正在……
热点问题研究!没有错误?!?
我的手臂现在被砍掉了.
事实上,第一个节目,但视频没有开始……而第二个看起来完全迷失在阴霾中.
在控制台日志消息中,我看到onStateChange监听器的第一次出现,即-1(未启动).但是之后 ???它死了!
Arrgg!
我必须超越自己的骄傲……并将其作为StackOveflow上的一个问题.