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

Question

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

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

但它不起作用.

或者我也可以截取停止并启动视频的点击(实际上我更喜欢),但即使这段代码也不起作用:

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

我认为因为经常在视频元素上方放置一个div,其中相关事件开始和停止,但我不知道如何通过jquery或javascript选择:

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

UPDATE

我没有意识到我正在测试的页面在iframe中有一个视频.语法最适合我的需求:

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

Answer 1

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

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

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

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

关于您的问题的其他一些说明：

没有stop事件。这是媒体事件的列表。

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

放置在 a 内的视频div不应对这些事件产生任何影响。我不确定为什么你会在上有活动start，所以也许我没有关注。enddiv