捕捉视频 HTML5 播放/停止事件答案

【问题标题】：Catch video HTML5 play/stop event捕捉视频 HTML5 播放/停止事件
【发布时间】：2013-01-10 23:35:40
【问题描述】：

如何收听 HTML5 视频的播放/停止/暂停事件？我尝试使用以下代码：

$("video").on('play',function(){
    //my code here
});

但它不起作用。

或者我也可以拦截停止和开始视频的点击（实际上我更喜欢），但即使这段代码也不起作用：

$('video').on('click', function(event) {
    //my code here
});

我想是因为经常在视频元素上方放置一个 div 与相关的事件启动和停止，但我不知道如何通过 jQuery 或 Javascript 进行选择：

附：此代码应该适用于动态组合/不是由我生成的页面，因此我无法引用指示其 ID 或特定类的元素。

更新

我没有意识到我正在测试的页面在 iframe 中有视频。语法最适合我的需要：

doc.querySelector("video").addEventListener('play', function(e) {
    //my code here
}, true);

【问题讨论】：

标签： html jquery html5-video dom-events addeventlistener

【解决方案1】：

看这里：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

所以...：

$("video")[0].onplay = function () {
    // Do play stuff here
};

希望有帮助！

【讨论】：

【解决方案2】：

您的第一次尝试应该会奏效。但是你需要确保 jQuery 确实在寻找视频元素。您说页面是动态生成的，因此您的代码可能在添加视频元素之前运行。如果您的脚本在文档中高于视频元素（例如，在 <head> 中），也会出现这种情况。

尝试将以下代码放在您的代码之前并检查输出：

console.log($("video"));

如果输出是一个空数组，那么您找不到任何视频元素。尝试将您的脚本放在页面的最后或DOMContentLoaded 事件中。或者，如果另一个脚本正在生成视频元素，请确保您的脚本在该脚本之后运行。

关于您的问题的其他几点说明：

没有stop 事件。这是list of media events。

我不认为click 事件是你想要的。无论用户点击视频的哪个位置，它都会触发：播放按钮、音量控制等。

放置在div 中的视频不应对这些事件产生任何影响。我不知道你为什么在div 上会有start 和end 事件，所以也许我没有关注。

【讨论】：

【解决方案3】：

试试这个！

//Direct
<video id="videoThis" src="blahhh.mp4" onended="yourFunction()"></videoThis>

 -or-

//JavaScript (HTML5)
document.querySelector("#videoThis").addEventListener("ended",yourFunction,false);

 -or-

//jQuery
$("#videoThis").bind("ended",yourFunction);

【讨论】：

请不要使用 on* 属性 :(
@callumacrae 你能详细说明/给出链接吗？
@MosheShaham 逻辑分离；你不应该混合你的 HTML 和 JavaScript。 “应该避免这些属性”：developer.mozilla.org/en-US/docs/Web/Guide/HTML/…