有多个youtube API播放器?

时间:2013-07-02 20:21:45

标签: api video youtube-api

我尝试拥有超过5个youtube视频播放器,但在创建第二个后我遇到了一些问题。 当我创建第二个时,第一个消失了,无法弄清楚出了什么问题。

非常感谢一些帮助 谢谢!

 //slide 2

 var tag = document.createElement('script');


  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.



  var player;
  function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
  height: '820',
  width: '707',
  videoId: 'NTq1WLKuOI4',
  events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
        }
    });
  }    

   function onPlayerReady(event) {
   setTimeout(function(){player.playVideo(); },8000);
  }

   // 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) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
  setTimeout(stopVideo, 29000);
  done = true;
     }
  }

  function stopVideo() {
  player.stopVideo();
  slide2();
  move();
  }


 var slide2 = function(){          
  setTimeout(function(){      
  slide3();  
  move(); 
  },9000);

 }   


   //slide3  

  var player;
  function onYouTubeIframeAPIReady() {
  player2 = new YT.Player('player2', {
  height: '820',
  width: '707',
  videoId: 'AQx1UjLv3Ps',
  events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
        }
    });
  }    

   function onPlayerReady(event) {
   setTimeout(function(){player2.playVideo(); },8000);
  }

   // 5. The API calls this function when the player's state changes.
    var done = false;
  function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
  setTimeout(stopVideo2, 29000);
  done = true;
     }
  }

  function stopVideo2() {
  player2.stopVideo();

  }

1 个答案:

答案 0 :(得分:1)

您不能多次调用YouTubeIframeAPIReady()。您需要在一个onYouTubeIframeAPIReady呼叫中初始化所有玩家。尝试在新的命名函数中包装onYouTubeIframeAPIReady的内容,然后在onYouTubeIframeAPIReady中全部调用它们。