Executing function at end of html5 video

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?

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

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>

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

EDIT: Here is the solution without 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>

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

<html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>

use onended event

var video = document.getElementsByTagName('video')[0];

video.onended = function(e) {
  alert('video ended');
}

the only way i managed it to work is the following code:

$('video')[0].on('ended',function(){
    console.log('Video has ended!');
});

Jason Cidras

Here is something you can try:

$(document).on('ended', 'video', function (e) {
    alert('video ended');
});

You said that the video is dynamically inserted after the DOM is loaded. In this script, you search on DOM for the video element and binds it with the ended function.

Here is the documentation for .on().
Here is the SO question for dynamic items.

I hope this helps!

You can use on in the place of live. Because on method is supported by jquery new versions and live is deprecated in new versions.

You can replace your code to this and your problem will be solved.

$(document).ready(function(){

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

    alert('video ended');

});

});

来源：https://stackoverflow.com/questions/14517639/executing-function-at-end-of-html5-video

标签

jquery

html5

html5-video