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

Inconsistency with Youtube-api Javascript and slow connections

本文关键字：连接速度慢不一致 Youtube-api Javascript 更新时间：2023-09-26

我正在构建一个网站，女巫在 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)

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

让它正常工作，解决方案是使用 Yutube iframe 的加载功能，如下所示：

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