1

私はyoutubeapiを使用して、この例よりも多くのビデオを追加しています。1つのページに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は3つの配列すべてのiframeを作成できます。これらのクリックイベントが関数に追加されるとすぐに、pausevideo関数は失敗します。

YouTubeのドキュメントを読みましたが、解決策が見つかりませんでした。

よろしくお願いします。

4

1 に答える 1

0

オブジェクトを個別の配列に格納するアプローチを採用したときにすべてのビデオが一時停止しない理由についての特定の質問に答えるために、配列を反復処理して各プレーヤーを呼び出すYT.Playerだけであると想定します。（および）配列に対して同じことをしていません。playerspauseVideo()players2players3

一度に多数のプレーヤをロードする際の JavaScript 実行の遅延というより大きな問題に対処するには、ページでの JavaScript の実行がシングル スレッドであることを覚えておく必要がありますonYouTubeIframeAPIReady()。その間、他のコードが実行されないようにします。したがって、これが問題になる場合は、その関数で実行スレッドを結び付けるのに費やす時間を最小限に抑えるようにしてください。そのためのテクニックの 1 つは、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 に答える