Получить состояние игрока с несколькими игроками YouTube на странице - PullRequest
Новая
       14

Получить состояние игрока с несколькими игроками YouTube на странице

3 голосов
/ 18 января 2011

У меня есть один HTML со многими игроками на YouTube.

Я подписываюсь на onStateChange, чтобы получать уведомления, когда пользователь воспроизводит видео. 

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

Теперь обратный вызов получает newState в качестве параметра. 

function callback(newState) {
    ...
}

Это работает нормально только с одним игроком. Но со многими игроками, как я могу узнать, какой игрок поднял событие StateChange? У обратного вызова только один параметр.

Есть ли способ узнать, какой игрок вызвал обратный вызов в форме события, или я должен установить для каждого отдельный обратный вызов?

Ответы [ 3 ]

3 голосов
/ 22 октября 2012

Вот мое решение, основанное на других ответах:

(1) Добавить параметр id к тегу объекта и / или встраивания

(2) Добавить playerapiid* параметр 1008 * для 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);
}

Я опубликовал демо здесь .

2 голосов
/ 25 февраля 2011

У меня была точно такая же проблема.Вот мое решение: 

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

1 голос
/ 29 февраля 2012

@ Решение alalonde больше не работает, потому что Adobe наложила дополнительные ограничения на символы, которые можно использовать для прослушивателей событий 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');
}
...