Recuperar el estado jugador con múltiples jugadores de YouTube en una página

Question

Hava un solo HTML con muchos jugadores de YouTube.

Estoy estén adheridos a la onStateChange para ser notificado cuando el usuario reproduce un vídeo.

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

Ahora la devolución de llamada obtener el newState como parámetro.

function callback(newState) {
    ...
}

Esto funciona bien con sólo un jugador. Pero con muchos jugadores, ¿cómo puedo saber reproductor wich elevó el evento stateChange? Devolución de llamada sólo hay un parámetro.

¿Hay una manera de saber qué jugador levantó la forma de devolución de llamada o evento que tenga que establecer un uo diferent de devolución de llamada para cada uno?

Answer 1

Aquí está mi solución basada en las otras respuestas:

(1) Añadir parámetro id al objeto y / o incrustar etiquetas

(2) Añadir playerapiid parámetro URL de vídeo (que debe coincidir con el 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) Crear funciones de devolución de llamada con nombre para cada video y asignarlos al jugador en caso onYouTubePlayerReady. Esta es una manera de hacerlo:

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

Me han publicado un demostración aquí .

Answer 2

tuve este mismo problema. Aquí está mi solución:

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']");
    ...
}

A continuación, sólo puede acceder cualquier variables que desea a través del cierre. Lo ideal sería que pudiéramos utilizar una función anónima en addEventListener (), pero debido a las limitaciones en el puente de ActionScript / JavaScript, eso no es posible.

Inspirado en esta discusión: http://groups.google .com / grupo / youtube-api-gdata / browse_thread / hilo / e8a8c85b801b9e25

Answer 3

solución

@ de alalonde ya no funciona ya que Adobe impone restricciones adicionales sobre los caracteres que se pueden utilizar los detectores de eventos de Flash. Ya no se puede usar [] o (), que hace que las soluciones anteriores en relación con este tema obsoleto. Esos caracteres generarán el siguiente error javascript:

identificador comienza inmediatamente después literal numérico

Aquí está mi solución (utilizando caracteres de punto):

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');
}