291

How do you detect when a HTML5 <video> element has finished playing?

1

7 Answers 7

361

You can add an event listener with 'ended' as first param

Like this :

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>
8
  • 9
    This is the only video."on end" event which works in the whole internet. Bravo!
    – Isaac
    Jun 8, 2012 at 15:36
  • 10
    Why do you check if e exists? Aug 7, 2013 at 0:12
  • 4
    @AllanStepps From what I can gather, the if(!e) { e = window.event; } statement that this answer originally included is IE-specific code for getting the latest event from within an event handler attached with attachEvent on early versions of IE. Since in this case, the handler is being attached with addEventListener (and those early versions of IE are irrelevant to people dealing with HTML5 video), it was completely unnecessary and I have removed it.
    – Mark Amery
    Jul 15, 2015 at 20:09
  • 5
    One point to note when using this method, Safari on the El Capitan verson of OS X (10.11) does not catch the 'ended' event. So in that case, I needed to use the 'timeupdate' event and then check for when this.current Time was equal to 0 again.
    – Cam
    Feb 1, 2017 at 23:03
  • 6
    Also remember to set loop to false, otherwise the ended event won't be triggered. Oct 31, 2017 at 5:30
143

Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.

This is the pertinent section:

<video src="video.ogv">
     video not supported
</video>

then you can use:

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

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.

6
  • 3
    I've tried to catch "ended" event exactly the same way, as you presented, but this event is not firing. I'm under Safari 5.0.4 (6533.20.27)
    – AntonAL
    Apr 11, 2011 at 15:25
  • @AntonAL: I'd post this as a new question if you are having issues. Apr 17, 2011 at 22:44
  • @All: You can do it like this as well. <video class="video_player" id="video" poster="images/video-pc.jpg" tabindex="0" height="100%" onended="myHandler()"> Dec 20, 2012 at 0:33
  • 5
    @AlastairPitts This is not valid on Chrome. Darkroro's answer is the only way I got it to work with Chrome. This still worked on Firefox.
    – Jeff
    May 30, 2013 at 19:21
  • Dead links. w3schools.com/tags/ref_eventattributes.asp => Media Events
    – Aurelien
    Sep 5, 2013 at 9:30
39

JQUERY

$("#video1").bind("ended", function() {
   //TO DO: Your code goes here...
});

HTML

<video id="video1" width="420">
  <source src="path/filename.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Event types HTML Audio and Video DOM Reference

1
  • 12
    -1. .on() has been preferred over .bind() since jQuery 1.7, which was released in 2011. Also, please format your code properly.
    – Mark Amery
    Jul 15, 2015 at 19:58
9

You can simply add onended="myFunction()" to your video tag.

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>
2
  • Tried a few other options but only this worked for me. Thanks
    – Silver
    Mar 14, 2021 at 8:28
  • Simple and working. Nice! Mar 8, 2022 at 2:21
6

Here is a simple approach which triggers when the video ends.

<html>
<body>

    <video id="myVideo" controls="controls">
        <source src="video.mp4" type="video/mp4">
        etc ...
    </video>

</body>
<script type='text/javascript'>

    document.getElementById('myVideo').addEventListener('ended', function(e) {

        alert('The End');

    })

</script>
</html> 

In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.

1
  • You have a syntax error in this JS code. Missing ) after argument list
    – frzsombor
    Nov 27, 2015 at 13:28
4

Here is a full example, I hope it helps =).

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" controls="controls">
  <source src="your_video_file.mp4" type="video/mp4">
  <source src="your_video_file.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        alert("Video Finished");
    }
</script>
</body> 
</html>
0

You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends

$("#myVideo").on("ended", function() {
   //TO DO: Your code goes here...
      alert("Video Finished");
});

$("#myVideo").on("loadedmetadata", function() {
      alert("Video loaded");
  this.currentTime = 50;//50 seconds
   //TO DO: Your code goes here...
});


$("#myVideo").on("timeupdate", function() {
  var cTime=this.currentTime;
  if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
      alert("Video played "+cTime+" minutes");
   //TO DO: Your code goes here...
  var perc=cTime * 100 / this.duration;
  if(perc % 10 == 0)//Alerts when every 10% watched
      alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <video id="myVideo" controls="controls">
    <source src="your_video_file.mp4" type="video/mp4">
      <source src="your_video_file.mp4" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>

</body>

</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.