javascript 钩住嵌入式youtube播放器内的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9185625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hook to click event inside embedded youtube player
提问by Alexander Bird
I want to run a function called stopSlidewhenever someone clicks the 'play' button on an embedded youtube video. Or even getting the function to run when they click anywhereinside the embedded video would work fine for me right now.
我想运行一个函数，stopSlide每当有人点击嵌入的 youtube 视频上的“播放”按钮时就会调用该函数。或者甚至在他们单击嵌入视频内的任何位置时运行该功能现在对我来说都可以正常工作。
How can I do this?
我怎样才能做到这一点？
采纳答案by Jakub Roztocil
There is a YouTube JavaScript API that provides event callbacks.
有一个提供事件回调的 YouTube JavaScript API。
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.
不幸的是，没有办法直接检测点击事件（至少我不知道）。但是，您可以检测可以使用的播放器状态的变化onStateChange。
First, you will need to enable the JS API in the player by embedding it by using a special URL:
首先，您需要通过使用特殊 URL 嵌入播放器来启用播放器中的 JS API：
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');
回答by May
Might be helpful ... edit according to your requirement http://jsfiddle.net/masiha/4mEDR/
可能会有所帮助...根据您的要求进行编辑 http://jsfiddle.net/masiha/4mEDR/
回答by Ben
i tried using the suggestions above but didnt succeed. it can't handle timer slider. please see Google example for automatic slider, they used a popup for the video. google slider with embedded video
我尝试使用上面的建议，但没有成功。它无法处理计时器滑块。请参阅 Google 自动滑块示例，他们为视频使用了弹出窗口。 带有嵌入视频的谷歌滑块
回答by Yogesh ravi
Upto my knowledge you can't detect a click inside a iframe,or you can't trigger any click event inside the iframe My solution is place a button inside the Iframe set it's properties as transparent(opacity) inside that button you can call your click function using playmethod and pause method you can enable autoplay
据我所知，您无法检测到 iframe 内的点击，或者您无法在 iframe 内触发任何点击事件我的解决方案是在 iframe 内放置一个按钮，将其属性设置为该按钮内的透明（不透明度），您可以调用您的单击功能使用播放方法和暂停方法可以启用自动播放
回答by JKing
You need to just register an event listener on the player to call your stopSlidefunction. The following line of code should do it for you (first you have to replace the two "strings" with the appropriate values - the ID of the embedded player, and the name of the function that you want to call. eg: "stopSlide"):
您只需要在播放器上注册一个事件侦听器即可调用您的stopSlide函数。以下代码行应该为您完成（首先，您必须将两个“字符串”替换为适当的值 - 嵌入式播放器的 ID，以及您要调用的函数的名称。例如：“stopSlide” )：
document.getElementById("_idOfEmbeddedPlayerElement_").addEventListener("onStateChange", "_nameOfFunctionToCall_");`
