youtube - 检索页面上多个 YouTube 播放器的播放器状态

Question

我有一个包含许多 YouTube 播放器的 HTML。

我订阅 onStateChange 以便在用户播放视频时收到通知。

function onYouTubePlayerReady(playerid) {
    var player = document.getElementById("playerA");
    player.addEventListener("onStateChange", "callback");
}

现在回调获取 newState 作为参数。

function callback(newState) {
    ...
}

只有一名玩家可以正常工作。但是对于很多玩家，我如何知道哪个玩家引发了 StateChange 事件？回调只有一个参数。

有没有办法知道哪个玩家引发了事件表单回调，或者我必须为每个玩家设置不同的回调？

Answer 1

这是我基于其他答案的解决方案:

(1) 将 id 参数添加到对象和/或嵌入标签

(2) 添加playerapiid视频网址参数(应与 id 匹配)

<object id="video1" data="http://www.youtube.com/v/AAAAAAAAAAA&version=3&enablejsapi=1&playerapiid=video1" ...>
    <embed ...>
</object>
<object id="video2" data="http://www.youtube.com/v/BBBBBBBBBBB&version=3&enablejsapi=1&playerapiid=video2" ...>
    <embed ...>
</object>

(3) 为每个视频创建命名回调函数，并将其分配给 onYouTubePlayerReady 事件中的播放器。这是一种实现方法:

function onYouTubePlayerReady(playerApiId) {
  var player = document.getElementById(playerApiId);
  window["onStateChange" + playerApiId] = function(state) {
    console.log("#" + playerApiId + ": new state " + state);
  };
  player.addEventListener("onStateChange", "onStateChange" + playerApiId);
}

我发布了demo here .