Récupérer état du lecteur avec plusieurs joueurs sur une page youtube

Question

Je Hava un seul HTML avec de nombreux joueurs de youtube.

Je vous abonnant au OnStateChange pour être averti lorsque l'utilisateur lit une vidéo.

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

Maintenant, le rappel obtenir le newState comme paramètre.

function callback(newState) {
    ...
}

Cela fonctionne bien avec un seul joueur. Mais avec beaucoup de joueurs, comment puis-je savoir Wich joueur a soulevé l'événement StateChange? Callback ont ??un seul paramètre.

Y at-il un moyen de savoir quel joueur a soulevé le rappel de formulaire d'événement ou je dois mettre un uo diferent rappel pour chacun?

Answer 1

Voici ma solution basée sur les autres réponses:

(1) Ajouter paramètre id à l'objet et / ou d'intégration balises

(2) Ajouter un paramètre playerapiid urls vidéo (il doit correspondre au 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) Créer nommées fonctions de rappel pour chaque vidéo et les affecter au joueur en cas de onYouTubePlayerReady. Voici une façon de le faire:

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

J'ai publié un démo ici .

Answer 2

J'ai eu ce même problème. Voici ma solution:

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

Ensuite, vous pouvez simplement l'accès que les variables qui vous voulez via la fermeture. Idéalement, nous pourrions utiliser une fonction anonyme dans addEventListener (), mais en raison de limitations dans le pont ActionScript / Javascript, ce n'est pas possible.

Inspiré par cette discussion: http://groups.google .com / groupe / youtube-api-gdata / browse_thread / fil / e8a8c85b801b9e25

Answer 3

@ solution de alalonde ne fonctionne plus parce que Adobe a imposé des restrictions supplémentaires sur les caractères qui peuvent être utilisés pour les auditeurs d'événements Flash. Vous ne pouvez plus utiliser [] ou (), ce qui rend les solutions précédentes en ce qui concerne cette question obsolète. Ces personnages vont générer l'erreur javascript suivant:

  

identifiant commence immédiatement après littéral numérique

Voici ma solution (en utilisant des personnages d'époque):

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