勾选嵌入的youtube播放器内的事件 [英] hook to click event inside embedded youtube player

问题描述

我想运行一个名为 stopSlide 的功能，只要有人点击嵌入式YouTube视频上的播放按钮。或者甚至在单击嵌入式视频中的任何位置点击时运行该功能现在都可以正常工作。

我该如何做到这一点？

解决方案

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

<不幸的是，没有办法直接检测点击事件（至少我没有意识到）。但是，您可以检测可以使用 onStateChange 。

首先，您需要通过使用特殊的URL嵌入播放器来启用JS API：

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

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

  function player_state_changed（state）{
 / *每当玩家的状态改变时，该事件就会被触发。 
可能的值有：
  -  unstarted（-1）
  -  ended（0）
  - 正在播放（1）
  - 已暂停（2）
  - 缓冲（3）
  - 视频提示（5）。 
当SWF第一次加载时，它会播放一个未启动的（-1）事件。 
当视频被提示并准备播放时，它将播放视频提示事件（5）。 
 * / 
 
 if（state == 1 || state == 2）{
 alert（''play'button * may * has been clicked'）; 
} 
 
} 
  

最后，您需要确保只要电影的状态发生变化，处理程序就会被调用：

  document.getElementById（'MY-PLAYER-ID'）。 addEventListener（'onStateChange'，'player_state_changed'）; 
  

I want to run a function called stopSlide whenever someone clicks the 'play' button on an embedded youtube video. Or even getting the function to run when they click anywhere inside the embedded video would work fine for me right now.

How can I do this?

解决方案

There is a YouTube JavaScript API that provides event callbacks.

There is, unfortunately, no way to directly detect a click event (at least I am not aware of any). You can, however, detect changes in the player state for which you can use onStateChange.

First, you will need to enable the JS API in the player by embedding it by using a special URL:

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

Then you need to create an event handler function:

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

}

Lastly, you need to make sure that the handler gets called whenever the state of the movie changes:

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

这篇关于勾选嵌入的youtube播放器内的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！