钩住嵌入式 youtube 播放器内的单击事件

Posted 2023-02-24

【中文标题】钩住嵌入式 youtube 播放器内的单击事件

【英文标题】：hook to click event inside embedded youtube player

【发布时间】：2012-02-29 10:24:55

【问题描述】：

每当有人单击嵌入的 youtube 视频上的“播放”按钮时，我想运行一个名为 stopSlide 的函数。甚至当他们点击嵌入视频中的 anywhere 时运行该功能现在对我来说都可以正常工作。

我该怎么做？

【参考方案1】：

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

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

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

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

【讨论】：

因为我是个菜鸟：我会在我的 js 文件（或 html）中放入什么代码来利用该事件？

我已经扩展了我的答案，希望它现在会更有帮助。

这里的“MY-PLAYER-ID”是什么意思？

@Serge: 你的玩家元素的 ID

这个问答已经很老了。这些天可能有一个新的 API。

【参考方案2】：

您只需在播放器上注册一个事件侦听器即可调用您的stopSlide 函数。以下代码行应该为您完成（首先您必须将两个“strings”替换为适当的值 - 嵌入式播放器的 ID，以及您想要的函数的名称调用。例如：“stopSlide”）：

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

【讨论】：

这会触发每个事件的回调函数，例如cue、buffer、play、pause、stop、end。

我们究竟应该搜索什么“嵌入式播放器的 ID”？ youtube 视频的

【参考方案3】：

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

【讨论】：

伟大的小提琴。 Masiha 没有提到的非常关键的细节...new YT.Player('player', ... 行中的字符串 'player' 是对嵌入 YouTube 视频的 iFrame 的 ID 的引用。

这是一个非常简洁的例子 - 喜欢它。感谢分享链接:)

它不会提醒我。为什么？

【参考方案4】：

我尝试使用上述建议，但没有成功。 它无法处理计时器滑块。 请参阅自动滑块的 Google 示例，他们为视频使用了弹出窗口。 google slider with embedded video

【讨论】：

欢迎来到 ***！如果我做对了，这个视频有帮助吗？如果是这样，您能否在此处添加该信息的摘录？这样，如果链接失效，您的答案仍然有用。

你能使用那些建议无效的人的名字吗？不幸的是，在这个网站上，人们可以用许多不同的方式对答案进行排序，因此“上面”没有任何意义。

【参考方案5】：

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