Executing function at end of html5 video

Question

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.

.on was added in jquery version 1.7. .live was deprecated in 1.7 — Ravi Y, Jan 25 '13 at 08:01
@ryadavilli yes but to my knowledge live() still functions in 1.7 doesn't it? — willdanceforfun, Jan 25 '13 at 08:18
Yes it should, it was deprecated and not removed till 1.9. My comment was to suggest that you could still use .on. as it was added in 1.7 itself. — Ravi Y, Jan 25 '13 at 08:20

fboes · Answer 1 · 2019-01-18T11:35:52.057

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.

score 14 · Answer 2 · answered May 25 '13 at 23:01

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

Dipak · Answer 3 · 2013-01-25T08:08:52.380

7

use onended event

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

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

Read more on Everything you need to know about HTML5 video and audio

edited Jan 25 '13 at 08:08

answered Jan 25 '13 at 08:02

Dipak

11,930
1
30
31

That looks great. Something I failed to mention is the video is loaded into the dom after the page is loaded, hence why I am using live('ended'). I'm not sure if then I can use your function as is due to this. – willdanceforfun Jan 25 '13 at 08:12

score 5 · Answer 4 · edited May 23 '17 at 12:26

5

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!

edited May 23 '17 at 12:26

Community

1
1

answered Mar 10 '16 at 14:02

Jason Cidras

509
5
11

score 5 · Answer 5 · answered Oct 31 '16 at 08:07

5

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

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

answered Oct 31 '16 at 08:07

Yonatan R

51
1
3

score 2 · Answer 6 · answered Sep 22 '16 at 07:24

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');

});

});

score 0 · Answer 7 · answered May 06 '22 at 06:21

Try this :

<script>
  function videoEnded() {
      location.href="https://www.google.com";
   }
</script>

<video id="myVideo" width="640" height="480" controls autoplay onended="videoEnded()">
  <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Executing function at end of html5 video

7 Answers7

Linked