jquery - 在html5视频结束时执行函数

Question

我有一个 html 视频，我想在视频结束时运行一个函数。我尝试了以下方法，但一无所获:

$(document).ready(function(){

    $('video').live('ended',function(){

        alert('video ended');

    });

});

知道为什么这不会在视频结束时触发吗？还是我没有提供足够的信息来回答这里的任何问题？

注意:我使用 live() 函数而不是 on() 是因为这个项目需要 jQuery 1.7。

Answer 1

为了您粘贴和复制的乐趣，jQuery 解决方案:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
  $(document).ready(function(){
    $('video').on('ended',function(){
      console.log('Video has ended!');
    });
  });
/*]]>*/</script>

将 'vid​​eo' 部分替换为适合您视频的正确选择器。

编辑:这是没有 jQuery 的解决方案:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
  document.querySelector('video').addEventListener('ended',function(){
    console.log('Video has ended!');
  }, false);
/*]]>*/</script>

将 'vid​​eo' 部分替换为适合您视频的正确选择器。