Executing Function At End Of Html5 Video

January 18, 2023 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:

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

Solution 2:

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

Solution 3:

use onended event

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

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

Baca Juga

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