Detect when an HTML5 video finishes

Question

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

Very useful documentation with test page from Apple: http://developer.apple.com/library/safari/#samplecode/HTML5VideoEventFlow/Listings/events_js.html#//apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5 All you wanted to know on HTML5 video events! — viebel, Sep 23 '12 at 15:04

score 373 · Accepted Answer · edited Jul 15 '15 at 20:05

373

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>

edited Jul 15 '15 at 20:05

Mark Amery

143,130
81
406
459

answered May 21 '10 at 09:32

Lothereus

3,819
1
15
13

9

This is the only video."on end" event which works in the whole internet. Bravo! – Isaac Jun 08 '12 at 15:36
10

Why do you check if e exists? – Allan Stepps Aug 07 '13 at 00:12
Works on Android Chrome in contrast to `onended` – Richard Sep 02 '14 at 17:13
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 '15 at 20:09
use this inside myHandler to refer to video, if (this.currentTime == this.duration) – Iman Dec 09 '15 at 10:01
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 01 '17 at 23:03
7

Also remember to set loop to false, otherwise the ended event won't be triggered. – Israel Morales Oct 31 '17 at 05:30
1

@MarkAmery if `e` argument does not exist, that means the function was called raw, like `myHandler()` rather than by a video element/object event. This distinction can be useful. – Ronnie Royston May 19 '18 at 21:52

score 144 · Answer 2 · edited Nov 19 '14 at 18:53

144

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.

edited Nov 19 '14 at 18:53

Mathias Rechtzigel

3,596
1
18
37

answered Apr 30 '10 at 00:01

Alastair Pitts

19,423
9
68
97

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 '11 at 15:25
@AntonAL: I'd post this as a new question if you are having issues. – Alastair Pitts Apr 17 '11 at 22:44
@All: You can do it like this as well. – VendettaDroid Dec 20 '12 at 00: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 '13 at 19:21
Dead links. http://www.w3schools.com/tags/ref_eventattributes.asp => Media Events – Aurelien Sep 05 '13 at 09:30
This is the one that works for me. Adding event listener 'ended' didn't work. – Rorok_89 Mar 23 '18 at 10:22

d1jhoni1b · Answer 3 · 2015-11-06T17:01:49.467

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

edited Nov 06 '15 at 17:01

answered Jan 13 '13 at 06:52

d1jhoni1b

7,497
1
51
37

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 '15 at 19:58

score 10 · Answer 4 · answered Aug 23 '19 at 13:40

10

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>

answered Aug 23 '19 at 13:40

JC R

314
2
10

Tried a few other options but only this worked for me. Thanks – Silver Mar 14 '21 at 08:28
Simple and working. Nice! – Liam Pillay Mar 08 '22 at 02:21

score 7 · Answer 5 · edited Oct 13 '16 at 19:17

7

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.

edited Oct 13 '16 at 19:17

posit labs

8,951
4
36
66

answered Jun 19 '14 at 20:31

user3758025

79
1
2

You have a syntax error in this JS code. Missing ) after argument list – frzsombor Nov 27 '15 at 13:28

score 4 · Answer 6 · answered Mar 14 '14 at 08:28

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>

score 0 · Answer 7 · answered Dec 08 '16 at 19:24

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>

Detect when an HTML5 video finishes

7 Answers7

Linked

Related