jQuery 捕捉视频 HTML5 播放/停止事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14269241/
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
Catch video HTML5 play/stop event
提问by jenjis
How can I listen to the events play/stop/pause of a HTML5 video? I tried with the following code:
如何收听 HTML5 视频的播放/停止/暂停事件？我尝试使用以下代码：
$("video").on('play',function(){
//my code here
});
but it does not work.
但它不起作用。
Alternatively I would be fine also intercept the click that stop and start the video (in fact I would prefer), but even this code not works:
或者，我也可以拦截停止和启动视频的点击（实际上我更喜欢），但即使是这段代码也不起作用：
$('video').on('click', function(event) {
//my code here
});
I think because often above the video element is placed a div with associated events start and stop, but I do not know how to select via jquery or javascript:
我想是因为经常在视频元素上方放置一个带有相关事件开始和停止的 div，但我不知道如何通过 jquery 或 javascript 进行选择：
P.S. This code should work on pages that are composed dynamically / not generated by me, so I can not refer the elements indicating their ID or a specific class.
PS 此代码应适用于动态组合/非我生成的页面，因此我无法引用指示其 ID 或特定类的元素。
UPDATE
更新
I did not realize that the page on which I was testing had a video inside an iframe. The syntax is best suited to my needs:
我没有意识到我正在测试的页面在 iframe 中有一个视频。语法最适合我的需要：
doc.querySelector("video").addEventListener('play', function(e) {
//my code here
}, true);
采纳答案by brianchirls
Your first attempt should work. But you need to make sure that jQuery is actually finding video elements. You say that the page is generated dynamically, so perhaps it's possible that your code is running beforethe video elements are added. This would also be the case if your script is higher up in the document than the video elements (e.g., in the <head>).
您的第一次尝试应该有效。但是您需要确保 jQuery 确实在查找视频元素。您说页面是动态生成的，因此您的代码可能在添加视频元素之前正在运行。如果您的脚本在文档中高于视频元素（例如，在 中<head>），也会出现这种情况。
Try placing the following code immediately before the code you have there and check the output:
尝试将以下代码放在您拥有的代码之前并检查输出：
console.log($("video"));
If the output is an empty array, then you aren't finding any video elements. Try placing your script at the very end of the page or inside a DOMContentLoadedevent. Or, if another script is generating the video elements, make sure your script runs after that one.
如果输出是空数组，则您找不到任何视频元素。尝试将您的脚本放在页面的最后或DOMContentLoaded事件内。或者，如果另一个脚本正在生成视频元素，请确保您的脚本在该脚本之后运行。
A few other notes on your question:
关于您的问题的其他一些说明：
There is no stopevent. Here's a list of media events.
没有stop事件。这是媒体活动列表。
I don't think the clickevent is what you want. That will fire no matter where on the video the user clicks: play button, volume control, etc.
我不认为这个click事件是你想要的。无论用户点击视频的哪个位置都会触发：播放按钮、音量控制等。
The video being placed inside a divshouldn't have any effect on these events. I'm not sure why you'd have startand endevents on a div, so maybe I'm not following.
放置在 a 中的视频不div应对这些事件产生任何影响。我不确定为什么你会在 a 上有start和end事件div，所以也许我没有关注。
回答by phonicx
See here:
看这里：
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
So... :
所以... ：
$("video")[0].onplay = function () {
// Do play stuff here
};
Hope that helps!
希望有帮助！
回答by SammyB
Give this a try!
试试这个！
//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);
