How do you detect when a HTML5 <video>
element has finished playing?
7 Answers
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>
-
9This is the only video."on end" event which works in the whole internet. Bravo!– IsaacJun 8, 2012 at 15:36
-
10
-
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 withattachEvent
on early versions of IE. Since in this case, the handler is being attached withaddEventListener
(and those early versions of IE are irrelevant to people dealing with HTML5 video), it was completely unnecessary and I have removed it. Jul 15, 2015 at 20:09 -
5One 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.– CamFeb 1, 2017 at 23:03
-
6Also remember to set loop to false, otherwise the ended event won't be triggered. Oct 31, 2017 at 5:30
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.
-
3I'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)– AntonALApr 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.– JeffMay 30, 2013 at 19:21
-
Dead links. w3schools.com/tags/ref_eventattributes.asp => Media Events– AurelienSep 5, 2013 at 9:30
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
-
12-1.
.on()
has been preferred over.bind()
since jQuery 1.7, which was released in 2011. Also, please format your code properly. Jul 15, 2015 at 19:58
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>
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.
-
You have a syntax error in this JS code. Missing ) after argument list Nov 27, 2015 at 13: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>
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>