javascript - 如何在 jQuery 中监听 HTML5 视频停止播放的情况？

Question

我找到了这个similar question here ，但是答案对我来说不起作用。

我的 JsFiddle: http://jsfiddle.net/leongaban/yvne6fnt/

HTML

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="hero_video" controls="" autoplay="autoplay" preload poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
    <source id="mp4" src="http://leongaban.com/v6/videos/clouds.mp4" type="video/mp4">
  <source id="webm" src="http://leongaban.com/v6/videos/clouds.webm" type="video/webm">
  <source id="ogv" src="http://leongaban.com/v6/videos/clouds.ogv" type="video/ogg">
  <p>Your user agent does not support the HTML5 Video element.</p>
</video>

JS

$("#hero_video").bind('stop', function(e) {
    console.log('stopped');
    alert('stopped');
}, true);

/*
$("video").bind('stop', function(e) {
    console.log('stopped');
    alert('stopped');
}, true);
*/

Answer 1

如果您从函数中删除第三个参数，则此方法有效:

$("#hero_video").bind('stop', function(e) {
    console.log('stopped');
    alert('stopped');
});

请注意，这只会在视频开头触发。如果您还想在暂停时触发事件，则还必须包含暂停事件:

$("#hero_video").bind('stop pause', function(e) {
    console.log('stopped');
    alert('stopped');
});

JsFiddle:http://jsfiddle.net/yvne6fnt/8/

不知道为什么会这样，因为该参数的默认值是true。 http://api.jquery.com/bind/