0

I'm building a website witch contains a 15 youtube embeds on 1 page, and I have a youtube-api javascript code witch plays them continuously, and changes a class that surrounds the embed. The problem is that the code occasionally doesn't fire, and this only happens online, not on my computer. I think this is because it sometimes takes too mutch time to load the 15 embeds with a slow connection, maybe the code fires when the players aren't ready, or too late? well... I dont know. I tried wrapping the whole code in a SetTimout() thing, but no luck. Anybody have a solution? Help will be greatly appreciated!

CODE (PARTIALLY):

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

可能对您有所帮助的一件事是不要为每个播放器对象使用不同的状态更改事件侦听器。相反，为所有玩家使用单个侦听器，因为任何状态更改事件还将包含对引发事件的玩家的引用（在事件对象的“目标”属性中）。首先，在每个播放器创建函数的“事件”参数中，将“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 回答
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 回答