1

我正在使用 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 文档，但没有找到解决方案。

预先感谢您的帮助。

4

1 回答 1

0

为了回答您关于为什么当您采用将YT.Player对象存储在单独数组中的方法时所有视频都没有暂停的具体问题，我将假设这是因为您只是迭代players数组并调用pauseVideo()每个播放器，并且对players2(and players3) 数组不做同样的事情。

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

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

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到您的一些好处playerVars，如此处所述。

顺便说一句，您在iv_load_policy传递给YT.Player构造函数的选项中指定一个值。那什么也做不了；你应该把它作为一个值放在playerVars部分中（你已经在做）。

于 2013-02-13T16:28:19.880 回答