3

我有一个带有许多 youtube 播放器的 HTML。

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

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

现在回调将 newState 作为参数。

function callback(newState) {
    ...
}

这仅适用于一名玩家。但是有很多玩家，我怎么知道哪个玩家提出了 StateChange 事件？回调只有一个参数。

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

4

3 回答 3

3

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

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

(2) 添加playerapiid参数到视频 url (它应该匹配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);
}

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

于 2012-10-22T19:17:01.683 回答
2

我有这个完全相同的问题。这是我的解决方案：

var videos = {};

//store the video player's data in the hash, with the playerapiid as the key
function loadFeaturedVideo(youTubeVideoId) {
    videos["featuredytplayer"] = {
        "yt_id": youTubeVideoId,
        "wrapperSelector": "#featured_player_wrapper",
        "embed": "featuredYtPlayer"
    };
    ...
}

function onYouTubePlayerReady(playerId) {
    var currentVideo = videos[playerId];
    var ytPlayer = document.getElementById(currentVideo["embed"]);
    videos[playerId]["stateChangeListener"] = function(newState) {
        var container = $(currentVideo["wrapperSelector"]);

        ...
    }
    ytPlayer.addEventListener("onStateChange", "videos['" + playerId + "']['stateChangeListener']");
    ...
}

然后你可以通过闭包访问你想要的任何变量。理想情况下，我们可以只在 addEventListener() 中使用匿名函数，但由于 ActionScript/Javascript 桥的限制，这是不可能的。

受此讨论的启发：http ://groups.google.com/group/youtube-api-gdata/browse_thread/thread/e8a8c85b801b9e25

于 2011-02-25T01:32:23.037 回答
1

@alalonde 的解决方案不再起作用，因为 Adob​​e 对可用于 Flash 事件侦听器的字符施加了额外的限制。您不能再使用 [] 或 ()，这使得以前有关此问题的解决方案已过时。这些字符将生成以下 javascript 错误：

标识符在数字文字之后立即开始

这是我的解决方案（使用句点字符）：

var players = {}; // global to keep track of all players on the page
function onYouTubePlayerReady (idPlayer) {
   var ytPlayer = document.getElementById (idPlayer);
   var idPlayerParams = 'yt' + Math.floor (Math.random()*100000); // create random varable name
   players [idPlayerParams] = {
        idPlayer: idPlayer,
        onStateChanged: function (state) {
            alert ('youtube player state changed to: ' + state + ', player id: ' + idPlayer);
        },
        onError: function (err) {
            alert ('youtube player error: ' + err + ', player id: ' + idPlayer);
        }
    };
    ytPlayer.addEventListener ('onStateChange', 'players.' + idPlayerParams + '.onStateChanged');
    ytPlayer.addEventListener ('onError', 'players.' + idPlayerParams + '.onError');
}
于 2012-02-29T00:01:14.590 回答