Question

我正在构建一个包含15个youtube嵌入在1页的网站，我有一个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)

Answer 1

可以帮助您的一件事是不为每个玩家对象使用不同的状态更改事件侦听器。相反，为所有玩家使用单个侦听器，因为任何状态更改事件还将包含对引发事件的玩家的引用（在事件对象的“target”属性中）。首先，在每个玩家创建函数的'events'参数中，将'onReady'绑定到一个函数，该函数将对该玩家的引用加载到一个全局对象中，并将'onStateChange'all绑定到同一个函数。这样的事情（注意：非常晚上写的未经测试的代码......如果你得到错误你无法弄明白，我们将通过它们来完成！）：

  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");
};
 };

Answer 2

最后工作，解决方案是使用Youtube 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");
};
            }
        }
    });
}

与Youtube-api Javascript和慢速连接不一致

2 个答案: