拥有多个youtube API播放器

Question

我试图拥有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();
  }

Answer 1

您不能多次调用YouTubeIframeAPIReady（）。您需要在YouTubeIframeAPIReady调用中初始化所有玩家。尝试将onYouTubeIframeAPIReady的内容包装在新的命名函数中，然后在onYouTube IframeAPIready中调用所有函数。