拥有多个 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

您不能多次调用 onYouTubeIframeAPIReady()。您需要在一次 onYouTubeIframeAPIReady 调用中初始化所有播放器。尝试将 onYouTubeIframeAPIReady 的内容包装在新的命名函数中，然后在 onYouTubeIframeAPIReady 中调用它们。