Question

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

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

但它不起作用。

或者我也可以截取停止并启动视频的点击（实际上我更喜欢），但即使这段代码也行不通：

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

我认为因为经常在视频元素上方放置一个带有关联事件的div启动和停止，但我不知道如何通过jquery或javascript选择：

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

更新

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

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

Answer 1

见这里：

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

所以...：

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

希望有所帮助！

Answer 2

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

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

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

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

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

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

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

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

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

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

3 个答案: