YT视频结束后如何切换下一个视频?

时间:2016-03-09 13:52:35

标签: javascript youtube-api

我有以下代码,可以播放来自youtube的不同视频。我想知道一旦预览结束后如何切换到下一个视频?

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '250',
    width: '436',
    videoId: 'ID HERE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': function(e) {
                if (e.data == 0) {
                }
            }
    }
  });

}
var item = document.getElementsByClassName('item');
function setLinks(){

  for (var i = 0; i < item.length; i++) {
    item[i].ind = i;
    addEvent('mouseover', item[i], itemHandler);
    addEvent('mouseout', item[i], itemHandler);
    addEvent('click', item[i], itemHandler);
        console.log('click')
  }
}


function itemHandler(e){
  var n = e.target.ind;
  switch(e.type) {

    case 'click':
        switch(n) {
          case 0:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 1:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 2:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
          case 3:
            counters("pause");
            TweenMax.to(youtubeVideo,1,{opacity:0, ease:Power1.easeInOut });
            setTimeout(function(){player.loadVideoById("ID HERE")}, 1000, console.log('click'));
            TweenMax.to(youtubeVideo,1,{opacity:1, delay: 1, ease:Power1.easeInOut });
            counters("play");
            break;
        }

    break;
  }
}

function startYoutube(){
  TweenMax.to(youtubeVideo,0.5,{opacity:1, ease:Power1.easeInOut });
  setLinks();
  youtubeVideo.style.display = "block";
  player.playVideo();
  counters("play");

}

function onPlayerReady() {
  function updateTime() {
    var oldTime = videotime;
    if(player && player.getCurrentTime) {
      videotime = player.getCurrentTime();
    }
    if(videotime !== oldTime) {
      onProgress(videotime);
    }
  }
  timeupdater = setInterval(updateTime, 100);
}

// when the time changes, this will be called.
onProgressTrue = false;
function onProgress(currentTime) {
 var d = player.getDuration();
   if(Math.round(currentTime) == Math.round(d/2) && !onProgressTrue) {
    onProgressTrue = true;
    counters("midpoint"); 
     console.log("the video reached halfway!");
   }
}

所以我如何拥有'player.getDuration()',但之后我不知道怎么能告诉它继续下一个'案例'。

0 个答案:

没有答案