在页面上使用多个 youtube 播放器检索播放器状态

问题描述

限时删除！！

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

I hava a single HTML with many youtube players.

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

I'm suscribing to the onStateChange to get notified when the user plays a video.

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

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

Now the callback get the newState as parameter.

function callback(newState) {
    ...
}

这仅适用于一名玩家.但是有很多玩家，我怎么知道哪个玩家引发了 StateChange 事件?回调只有一个参数.

This works ok with only one player.But with many players, how can I know wich player raised the StateChange event? Callback just have one parameter.

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

Is there a way to know which player raised the event form callback or i have to set uo a diferent callback for each one?

推荐答案

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

Here is my solution based on the other answers:

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

(1) Add id parameter to the object and/or embed tags

(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 事件中将它们分配给播放器.这是一种方法:

(3) Create named callback functions for each video and assign them to the player in the onYouTubePlayerReady event. Here is one way of doing it:

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

我在这里发布了一个演示.

这篇关于在页面上使用多个 youtube 播放器检索播放器状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..