How to connect jQuery event handler to YouTube movie?

Question

[EDIT: Sorry to those who already answered - in my sleep deprived state, I forgot that this particular situation is a YouTube movie, not a JW FLV player. I see that there is more extensive documentation on interacting with movies on YouTube, so I will continue this, but any additional information is also welcome]

I use YouTube embedded videos in a collection of div elements that rotate using the jQuery plugin ( http://malsup.com/jquery/cycle/ ).

I would like the loop to stop when I click on one of the movies to start playing it, but I cannot figure out how to attach the jQuery event handler to the player object.

This is what my current code looks like (you cannot directly select the object tag using jQuery, so I select the parent div and then get the object element as the first child):

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

But that does not do the trick. I am not the author of Flash, so I am not very familiar with ActionScript and have never before set up the interaction between JavaScript and a Flash movie.

Answer 1

The YouTube Player API is pretty simple. You just need to listen to the event onStateChangeand control the loop plugin depending on the state:

: http://jsbin.com/izolo ( http://jsbin.com/izolo/edit)

:

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

- - , javascript. SWF, , javascript, , , .

, javascript , , (, ), , javascript, SWF .

Answer 3

, flash ExternalInterface , flash javascript javascript .

Answer 4

If you insert a player using swfobject, you will want to use swfobject.getObjectById to get a link to the movie. Read the documents to find out why you need it.

You also need to set {wmode: "transparent"} for the player so that it can trigger JavaScript click events.