CODEWITHSUNDEEP
jqueryhtmlhtml5-video
willdanceforfun
willdanceforfun

Reputation: 11240

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.

Upvotes: 35

Views: 92594

Answers (7)

Omkar Jadhav
Omkar Jadhav

Reputation: 504

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>

Upvotes: 0

fboes
fboes

Reputation: 2239

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.

Upvotes: 74

Yonatan R
Yonatan R

Reputation: 51

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

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

Upvotes: 5

Tahir Afridi
Tahir Afridi

Reputation: 200

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

});

});

Upvotes: 2

Jason Cidras
Jason Cidras

Reputation: 507

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!

Upvotes: 5

Ilya Libin
Ilya Libin

Reputation: 1617

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

Upvotes: 14

Dipak
Dipak

Reputation: 12190

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

Upvotes: 7

Related Questions