Executing Function At End Of Html5 Video

January 30, 2024 Post a Comment

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

Solution 1:

For your paste & copy pleasure the jQuery solution:

<videowidth="320"height="240"><sourcesrc="movie.mp4"type="video/mp4"></video><scriptsrc="//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:

<videowidth="320"height="240"><sourcesrc="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.

Solution 2:

<html><head><title></title><script>functionvideoEnded() {
    alert('video ended');
}


    </script></head><body><videosrc="video/endscene.mp4"id="video"controlsonended="videoEnded()">
    video not supported
</video></body></html>

Solution 3:

use onended event

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

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

Solution 4:

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!

Solution 5:

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

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

Html5 College