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

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

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

但它不起作用.

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

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

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

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

UPDATE

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

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

最佳答案

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

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

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

如果输出是空数组,则表示您没有找到任何视频元素.尝试将脚本放在页面的最末端或DOMContentLoaded事件中.或者,如果另一个脚本正在生成视频元素,请确保您的脚本在该脚本之后运行.

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

没有停止事件.这是一个 list of media events.

我不认为点击事件是你想要的.无论用户点击的视频在哪里,都会触发：播放按钮,音量控制等.

放在div中的视频不应对这些事件产生任何影响.我不确定你为什么在div上有开始和结束事件,所以也许我没有关注.

相关文章