Question

我正在尝试在播放youtube嵌入时更改导航栏的内容，因此用户会看到声音（/视频）来自导航栏的女巫项目。它适用于一个玩家，但是当你有两个玩家时这是一个问题。因为如果正在播放两个嵌入并且在其中一个上按下暂停，则看起来在导航栏上没有播放。

我要做的是让我的导航栏上的1个项目（编号10）对多个YouTube播放器做出反应。因此，如果我按下播放，数字10会亮起红色，如果我按下暂停（或停止），它会再次变为白色（原始颜色）。这适用于一个玩家，但不适用于两个（或更多）。因为如果它在两个玩家上按下播放，则导航栏项目变为红色。但是，如果他们中的一个“pauze”，导航栏项目将变为白色，而另一个游戏仍在播放。

我想要的是“去白”事件来看两个玩家，所以如果其他玩家还在玩，我希望导航栏项保持红色，只有当两个玩家都停止时，它才会变白。

我需要'去白'事件说：只有当两个玩家都不玩时才变成白色

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

导航条：

 </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：

<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事件的问题，女巫看起来像这样：

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方法知道如何对你做navbar。这样的事情可能会得到你需要的东西：

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/

具有多个Youtube播放器的innerHTML事件（使用javascript API更改导航栏）

1 个答案: