0

私は、1ページに15個のYouTube埋め込みを含むウェブサイト魔女を構築しています.youtube-api javascriptコード魔女がそれらを連続的に再生し、埋め込みを囲むクラスを変更します。問題は、コードが時々起動しないことです。これはオンラインでのみ発生し、私のコンピューターでは発生しません。これは、接続が遅いと 15 個の埋め込みをロードするのに時間がかかりすぎることがあるからだと思います。おそらく、プレーヤーの準備ができていないか、遅すぎるときにコードが起動するのでしょうか? うーん...わかりません。コード全体を SetTimout() でラップしようとしましたが、うまくいきませんでした。誰にも解決策がありますか？助けていただければ幸いです。

コード (部分的):

var tag = document.createElement('script');

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

  var player1;var player2;
function onYouTubeIframeAPIReady() {
  player1 = new YT.Player('player1', {
events: {
  'onStateChange': onPlayerStateChange1
}
  });
  player2 = new YT.Player('player2', {
events: {
  'onStateChange': onPlayerStateChange2
}
  });

---- etc... (untill player 15)

function onPlayerStateChange1(event) {
if (event.data == 0) {
player2.playVideo();
};
if (event.data == 1) {
document.getElementById("redlow1").setAttribute("class", "hero-unit77");
document.getElementById("redhigh1").setAttribute("class", "hero-unit88");
};
if (event.data == 2 || event.data == 0 || event.data == 5) {
document.getElementById("redlow1").setAttribute("class", "hero-unit7");
document.getElementById("redhigh1").setAttribute("class", "hero-unit8");
};
}
function onPlayerStateChange2(event) {
if (event.data == 0) {
player3.playVideo();
};
if (event.data == 1) {
document.getElementById("redlow2").setAttribute("class", "hero-unit77");
document.getElementById("redhigh2").setAttribute("class", "hero-unit88");
};
if (event.data == 2 || event.data == 0 || event.data == 5) {
document.getElementById("redlow2").setAttribute("class", "hero-unit7");
document.getElementById("redhigh2").setAttribute("class", "hero-unit8");
};
}

---- etc... (untill player 15)
4

2 に答える 2

0

最終的に動作するようになりました。ソリューションは、Yutube iframe の onload 関数を次のように使用していました。

<iframe onload="floaded1()" id="player1">

このスクリプトで：

function floaded1() {
             player1 = new YT.Player('player1', {
             events: {
                'onStateChange': function (event) {
if (event.data == 0) {
player2.playVideo();
};
if (event.data == 1) {
document.getElementById("redlow1").setAttribute("class", "hero-unit77");
document.getElementById("redhigh1").setAttribute("class", "hero-unit88");
};
if (event.data == 2 || event.data == 0 || event.data == 5) {
document.getElementById("redlow1").setAttribute("class", "hero-unit7");
document.getElementById("redhigh1").setAttribute("class", "hero-unit8");
};
            }
        }
    });
}
于 2013-10-01T10:55:59.867 に答える
0

役立つかもしれないことの 1 つは、プレイヤー オブジェクトごとに異なる状態変更イベント リスナーを使用しないことです。代わりに、すべてのプレーヤーに対して単一のリスナーを使用してください。状態変更イベントには、イベントを発生させたプレーヤーへの参照も含まれるためです (イベント オブジェクトの「ターゲット」属性内)。まず、各プレーヤー作成関数の「events」パラメーターで、そのプレーヤーへの参照をグローバル オブジェクトにロードする関数に「onReady」をバインドし、「onStateChange」をすべて同じ関数にバインドします。このようなもの (注: 非常に深夜に書かれたテストされていないコード ... わからないエラーが発生した場合は、解決します!):

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

  var player1, player2;
  var players={};
  function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
     events: {
     'onReady': function() {
         players.['player1']=player1;
      }
     'onStateChange': onPlayerStateChange                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
     }
    });
    player2 = new YT.Player('player2', {
     events: {
      'onReady': function() {
         players['player2']=player2;
      }
      'onStateChange': onPlayerStateChange;
    }
  });
---- etc... (untill player 15)

次に、状態変更リスナー関数を定義し、参照用に event.target を使用できます。

onPlayerStateChange = function(event) {
 if (event.data == 0) {
  players[event.target.a.id].playVideo();
 };
 if (event.data == 1) { 
   document.getElementById(event.target.a.id.replace("player","redlow")).setAttribute("class", "hero-unit77");
document.getElementById(event.target.a.id.replace("player","redhigh")).setAttribute("class", "hero-unit88");
};
if (event.data == 2 || event.data == 0 || event.data == 5) {
   document.getElementById(event.target.a.id.replace("player","redlow")).setAttribute("class", "hero-unit7");
   document.getElementById(event.target.a.id.replace("player","redhigh")).setAttribute("class", "hero-unit8");
};
 };
于 2013-09-22T07:50:03.273 に答える