嵌入式youtube播放器内的挂钩点击事件

Question

每当有人点击嵌入式youtube视频上的"播放"按钮时，我想运行一个名为stopSlide的函数。或者，当他们在嵌入式视频中的任何位置点击时，让函数运行对我来说现在都很好。

我该怎么做？

Answer 1

有一个YouTube JavaScript API提供事件回调。

不幸的是，没有办法直接检测点击事件（至少我不知道有）。但是，您可以检测玩家状态的变化，您可以使用onStateChange。

首先，您需要在播放器中启用JS API，方法是使用特殊的URL:嵌入它

http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1

然后您需要创建一个事件处理程序函数：

function player_state_changed(state) {
  /* This event is fired whenever the player's state changes.
     Possible values are:
     - unstarted (-1)
     - ended (0)
     - playing (1)
     - paused (2) 
     - buffering (3)
     - video cued (5). 
     When the SWF is first loaded it will broadcast an unstarted (-1) event.
     When the video is cued and ready to play it will broadcast a video cued event (5).
  */
  if (state == 1 || state == 2) {
    alert('the "play" button *might* have been clicked');
  }
}

最后，您需要确保每当电影的状态发生变化时都会调用处理程序：

document.getElementById('MY-PLAYER-ID').addEventListener('onStateChange', 'player_state_changed');

Answer 2

可能会有所帮助。。。根据您的要求进行编辑http://jsfiddle.net/masiha/4mEDR/

Answer 3

我尝试使用上面的建议，但没有成功。它无法处理计时器滑块。请参阅谷歌的自动滑块示例，他们使用了一个弹出的视频。带有嵌入式视频的谷歌滑块

Answer 4

据我所知，您无法检测到iframe内部的点击，也无法触发iframe内的任何点击事件我的解决方案是在Iframe中放置一个按钮，将其属性设置为透明（不透明度）。在该按钮内，您可以使用播放方法和暂停方法调用单击函数。您可以启用自动播放

Answer 5

您只需要在播放器上注册一个事件侦听器即可调用stopSlide函数。下面的代码行应该为您完成这项工作（首先，您必须用适当的值替换两个"字符串"-嵌入式播放器的ID和您想要调用的函数的名称。例如："stopSlide"）：

document.getElementById("_idOfEmbeddedPlayerElement_").addEventListener("onStateChange", "_nameOfFunctionToCall_");`