如何将jQuery事件处理程序附加到YouTube电影？

Question

[编辑:对于那些已经回答的人 - 抱歉 - 在我睡眠不足的状态下,我忘记了这种特殊情况是YouTube电影,而不是JW FLV播放器.我可以看到有更多关于与YouTube电影互动的文档,所以我会追求这一点,但也欢迎更多信息]

我正在使用jQuery循环插件(http://malsup.com/jquery/cycle/)在正在轮换的div集合中使用嵌入式YouTube视频.

当我点击其中一部电影开始播放时,我希望循环停止,但我无法弄清楚如何将jQuery事件处理程序附加到播放器对象.

这是我当前代码的样子(你不能直接用jQuery选择一个对象标签,所以我选择父div,然后将object元素作为第一个子元素):

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

但这并不能解决问题.我不是Flash的作者,所以我对ActionScript并不熟悉,之前我从未在JavaScript和Flash电影之间建立过互动.

谢谢你的帮助!

- 保罗

Answer 1

YouTube播放器API非常简单.您只需要监听onStateChange事件并根据状态控制循环插件:

这是一个工作演示: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');
  }
}