0

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

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

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

我需要“go white”事件来说明：只有在两个玩家都不玩的情况下才变白

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

导航栏：

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

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

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

4

1 回答 1

0

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

对您可能有用的两件事：1）在您的 onYouTubePlayerAPIReady 方法中，您需要使用一个数组来保存对两个播放器的引用（因此您不会用第二个覆盖第一个）。如果您不这样做，那么您将不会再听到来自第一个玩家对象的事件。这种方法还可以让您跟踪哪些玩家正在玩，因此当暂停事件出现时，会存储状态以供您查看是否所有玩家都已停止并且您需要更改导航栏。2) 请注意，事件元素不仅有数据，而且还有一个“目标”属性，该属性将包含引发事件的玩家的 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/

于 2013-08-20T05:12:21.747 回答