在html5视频结束时执行功能 [英] Executing function at end of html5 video

问题描述

我有一个HTML视频，我希望在视频结束时运行一个功能。我尝试过以下但我什么都没得到：

I have a html video, and I am wanting to run a function when a video ends. I have tried the following but I get nothing:

$(document).ready(function(){

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

        alert('video ended');

    });

});

为什么这不会在视频结束时触发？或者我没有提供足够的信息来回答这里的任何内容？

Any ideas why this isn't triggering at the end of a video? Or have I not provided enough information to answer anything here?

注意：我正在使用live（）函数而不是on（）因为需要使用jQuery 1.7这个项目。

Note: I'm using live() function and not on() because of the need for jQuery 1.7 with this project.

推荐答案

对于你的粘贴&复制jQuery解决方案：

For your paste & copy pleasure the jQuery solution:

<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>

用视频的正确选择器替换'video'部分。

Replace the 'video'-part with the correct selector for your video.

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

EDIT: Here is the solution without jQuery:

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

这篇关于在html5视频结束时执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！