创建许多YouTube iframe播放器会降低初始页面加载速度

Question

我正在使用youtube api添加很多视频，比这个例子更多，一页15页，另一页30页;逻辑是相同的

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

  // make player array
  var players = new Array();

  function onYouTubeIframeAPIReady() {
    players[0] = new YT.Player('player1', { //player1 is a div id in the html, this is how it works throughout the page
      height: '405',
      width: '720',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }
    });
    players[1] = new YT.Player('player2', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      suggestedQuality: 'large',
      iv_load_policy: '3',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }
    });
    players[2] = new YT.Player('player3', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      suggestedQuality: 'large',
      iv_load_policy: '3',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }     
    });
     players[3] = new YT.Player('player4', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      iv_load_policy: '3',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }
    });
      players[4] = new YT.Player('player5', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });
    players[5] = new YT.Player('player6', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });
    players[6] = new YT.Player('player7', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });




  }
//to stop the video from playing
  $(document).click( function() {
    //loop players array to stop them all
    $(players).each(function(i){
       this.pauseVideo();
      });
  });

上述代码的问题在于iframe需要很长时间才能加载到页面上。这会干扰其他javascript，例如触发包含某些视频的模态窗口。

在下一个例子中，我将视频分成3个阵列，其中2个阵列是在模态按钮事件等事件上触发的。

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

  // make player array
  var players = new Array();
  var players2 = new Array();
  var players3 = new Array();

  function onYouTubeIframeAPIReady() {
    players[0] = new YT.Player('player1', {
      height: '405',
      width: '720',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }
    });




   $('.btn-1').click( function(){

      players2[0] = new YT.Player('player3', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      suggestedQuality: 'large',
      iv_load_policy: '3',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }     
    });
     players2[1] = new YT.Player('player4', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      iv_load_policy: '3',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3
          }
    });
      players2[2] = new YT.Player('player5', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });



  });


   $('.btn-2').click( function(){


  players3[0] = new YT.Player('player7', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });
    players3[1] = new YT.Player('player8', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });
     players3[2] = new YT.Player('player9', {
      height: '315',
      width: '560',
      videoId: 'Sqd3jUPq3Lw',
      playerVars: { 
          'rel': 0, 
          'enablejsapi': 1,
          'iv_load_policy': 3 
          }
    });
   });
   }

  $(document).click( function() {
    //loop players array to stop them all

    $(players).each(function(i){
       this.pauseVideo();
      });   
      $(players2).each(function(i){
       this.pauseVideo();
      });
      $(players3).each(function(i){
       this.pauseVideo();
      });
        });

这实际上错开了加载时间。页面加载非常快，虽然模态需要更长的时间，但我觉得用户愿意等待几秒钟来加载iframe。

什么行不通的是最后一个暂停文档点击所有视频的功能（当用户点击模态时很有用）。具有讽刺意味的是，如果我摆脱按钮点击事件，函数onYouTubeIframeAPIReady能够为所有三个数组创建iframe。只要将这些点击事件添加到该功能，pausevideo功能就会失败。

我已经阅读了youtube文档并且没有找到解决方案。

提前感谢您的帮助。

Answer 1

要回答您在将YT.Player个对象存储在单独的数组中时，为什么所有视频都没有暂停的特定问题，我将假设它因为您只是在players数组上进行迭代并在每个播放器上调用pauseVideo()，而不是对players2（和players3）数组执行相同操作。< / p>

要在一次加载大量播放器时解决较大的JavaScript执行延迟问题，您需要记住页面上的JavaScript执行是单线程的，如果您在{{{然后，这必然会阻止任何处理程序或其他代码在此期间执行。因此，如果这对您来说是一个问题，您应该尽量减少花费在该函数中的执行线程的时间。这样做的一种技术是排队执行deferred via setTimeout() calls的一些操作。

这可能看起来像（未经测试）：

onYouTubeIframeAPIReady()

您可能会看到将var players = []; function onYouTubeIframeAPIReady() { window.setTimeout(function() { players.push(new YT.Player('player1', { // Your player1 config here... })); }, 0); // Many other window.setTimeout() calls... window.setTimeout(function() { players.push(new YT.Player('player50', { // Your player50 config here... })); }, 0); } 添加到controls: 2，documented here，也可能会带来一些好处。

顺便说一下，您将playerVars指定为传递给iv_load_policy构造函数的选项中的值。那没有任何成就;你应该把它作为一个值放在YT.Player部分（你已经做过）中。