6

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

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

但它不起作用。

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

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

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

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

更新

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

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

3 回答 3

4

看这里：

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

所以... ：

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

希望有帮助！

于 2013-01-10T23:40:10.710 回答
1

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

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

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

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

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

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

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

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

于 2013-01-11T01:20:40.880 回答
0

试试这个！

//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);
于 2013-01-10T23:44:00.057 回答