Comment puis-je joindre un gestionnaire d'événements jQuery pour un film YouTube?

Question

[EDIT: Désolé à ceux qui ont déjà répondu - dans mon état privé de sommeil, j'ai oublié que cette situation est un film YouTube, pas le lecteur JW FLV. Je peux voir qu'il ya plus vaste documentation sur l'interaction avec les films YouTube, donc je vais poursuivre, mais plus d'information est également la bienvenue]

Je suis en utilisant des vidéos YouTube embarqués dans une collection de divs qui sont en rotation en utilisant le plug-in du cycle jQuery ( http://malsup.com/jquery/cycle/ ).

Je voudrais le cycle d'arrêter quand je clique sur l'un des films pour commencer à jouer, mais je ne peux pas comprendre comment attacher un gestionnaire d'événements jQuery à l'objet lecteur.

Voici ce que mon code actuel ressemble (vous ne pouvez pas sélectionner directement une étiquette d'objet avec jQuery, donc je sélectionner la div parent, puis obtenir l'élément d'objet comme le premier enfant):

$("div.feature-player").children(":first").click(function(event) {
   $('#features').cycle('stop');
});

Mais cela ne fait pas l'affaire. Je ne suis pas un auteur de Flash, donc je ne suis pas vraiment familier avec ActionScript, et je ne l'ai jamais mis en place une interaction entre JavaScript et un film Flash avant.

Answer 1

L'API de lecteur YouTube est assez simple. Il suffit d'écouter l'événement onStateChange et contrôler le plug-in du cycle en fonction de l'état:

Voici une démonstration de travail: http://jsbin.com/izolo (éditable via http://jsbin.com/izolo/edit )

Et le code pertinent:

function handlePlayerStateChange (state) {
  switch (state) {
    case 1:
    case 3:
      // Video has begun playing/buffering
      videoContainer.cycle('pause');
      break;
    case 2:
    case 0:
      // Video has been paused/ended
      videoContainer.cycle('resume');
      break;
  }
}

function onYouTubePlayerReady(id){
  var player = $('#' + id)[0];
  if (player.addEventListener) {
    player.addEventListener('onStateChange', 'handlePlayerStateChange');
  }
  else {
    player.attachEvent('onStateChange', 'handlePlayerStateChange');
  }
}

Answer 2

films Flash sont à peu près boîtes noires aussi loin que le javascript est concerné. Si le fichier SWF que vous utilisez n'a pas été écrit pour interagir avec javascript alors vous êtes probablement hors de la chance.

Vous aurez soit besoin de comprendre ce que javascript méthodes du film que vous utilisez expose (espérons qu'il dispose d'une documentation), trouver un autre que ne fournissent l'interaction javascript ou écrire votre propre SWF manipuler.

Answer 3

Qu'est-ce que vous cherchez est le flash ExternalInterface classe, qui est utilisé pour la communication de flash javascript et de javascript pour flash.

Answer 4

Si vous intégrez le lecteur en utilisant swfobject vous allez vouloir utiliser swfobject.getObjectById pour obtenir une référence au film. Lisez la documentation pour voir pourquoi vous avez besoin de le faire.

Aussi, vous devrez définir {wmode: « transparent »}. Pour le joueur afin qu'il bouillonner événements click JavaScript