带有多个Youtube播放器的innerHTML事件(使用javascript API更改导航栏)

Question

当播放youtube嵌入时，我试图更改导航栏的内容，这样用户就可以在导航栏的开关项上看到声音（/视频）。对于一个球员来说效果很好，但当你有两个球员时就会出现问题。因为如果有两个嵌入正在播放，并且在其中一个上按下了暂停键，那么导航栏上似乎没有播放。

我想做的是让导航栏上的1个项目（数字10）对多个youtube玩家做出反应。所以，如果我按播放，数字10会亮起红色，如果我按下暂停（或停止），它会再次变为白色（原始颜色）。这对一个玩家很有效，但对两个（或更多）玩家不起作用。因为如果它在两个玩家身上按下play，导航栏项目会变成红色。但如果其中一个玩家被按下，导航栏就会变成白色，而另一个玩家仍在玩。

我想要的是观察两名玩家的"变白"事件，所以如果另一名玩家仍在玩，我希望导航栏项目保持红色，只有当两名玩家都停止时，它才应该变白。

我需要"变白"事件来说明：只有当两个玩家都没有玩时才变白

（希望这比之前的解释更好）

导航栏：

 </li>
  <li><a id="c10" href="#as10">10</a></li>
  <li><a id="c09" href="#as9">9</a></li>
  <li><a id="c08" href="#as8">8</a></li>
  ....
</ul>

嵌入：

<iframe id="player1" name="t136" width="240" height="220" data-src="http://www.youtube.com/embed/IpMqzFdt5fU?rel=0&showinfo=2&controls=2" enablejsapi="1" onload=lzld(this) frameborder="0" controls="2" allowfullscreen src="about:blank" onload=lzld(this)>
<iframe id="player2" name="t137" width="240" height="220" data-src="http://www.youtube.com/embed/CwYo5DzFzQ4?rel=0&showinfo=2&controls=2" enablejsapi="1" frameborder="0" controls="2" allowfullscreen src="about:blank" onload=lzld(this)> </iframe>

脚本：

<script type="text/javascript">
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player1' , {
  events: {
    'onStateChange': onPlayerStateChange
  }
 });
player = new YT.Player('player2' , {
  events: {
    'onStateChange': onPlayerStateChange
      }
     });
  }
  function onPlayerStateChange(event) {
      if (event.data == 1 ) {
        var element=document.getElementById("c10");
element.innerHTML="<font color=red>10</font>";}
    if (event.data == 2 || event.data == 0) {var element=document.getElementById("c10");
element.innerHTML="10";};
  }
</script>

新问题

我在使用iframe刷新按钮时遇到了innerhtml事件的问题，witch看起来像这样：

HTML:

<a class="pull-right" href="#" onclick="Click1()">refresh</a>

JAVASCRIPT:

function Click1(){
  document.getElementById('player1').src = document.getElementById('player1').src;
  players["player1"] = [new YT.Player("player1", { events: { 'onStateChange': onPlayerStateChange }}), false];
  if (allStopped==true) {document.getElementById("c10").innerHTML = "10";}

再次出现的问题是，如果用户在播放嵌入时按下刷新键，导航栏将保持红色，而它应该是白色（如果没有播放任何内容）。我以前也遇到过同样的问题，但我无法让它与点击事件一起工作。这一次，您可以确定刷新会导致播放停止，但其他嵌入可能正在播放。

Answer 1

编辑：更新以下代码和描述，以反映对原始帖子的更新

有两件事可能对你有用：1）在你的onYouTubePlayerAPIReady方法中，你想使用一个数组来保存对两个玩家的引用（这样你就不会用第二个覆盖第一个）。如果你不这样做，那么你就不会再听到来自第一个玩家对象的事件。这种方法还可以让你跟踪哪些玩家在玩，这样当出现暂停事件时，就会存储状态，以便你了解是否所有玩家都停止了，你需要更改导航栏。2） 请注意，event元素不仅有数据，还有一个"target"属性，该属性将包含引发事件的玩家的ID。所以你应该能够使用这些信息让你的onPlayerStateChange方法知道该对你的导航栏做什么。像这样的东西可能会满足你的需求：

var players = {};
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
        players[iframes[i].id] = [new YT.Player(iframes[i].id, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        }), false] // the 'false' in this array is whether or not it's currently playing
    }
}
function onPlayerStateChange(event) {
    if (event.data == 1) {
        document.getElementById("c10").innerHTML = "<span style='color:red'>10</span>";
        players[event.target.a.id][1] = true;
    }
    if (event.data == 2 || event.data == 0) {
        var allStopped = true;
        players[event.target.a.id][1] = false;
        for (var frame in players) {
            if (players[frame][1] == true) {
                allStopped = false;
                break;
            }
        }
        if (allStopped == true) {
            document.getElementById("c10").innerHTML = "10";
        }
    }
}

下面是一段代码，它证明了它的工作原理：

http://jsfiddle.net/jlmcdonald/VA64N/9/