CODEWITHSUNDEEP
htmlhtml5-video
Brent
Brent

Reputation: 23722

Detect when an HTML5 video finishes

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

Upvotes: 307

Views: 401654

Answers (7)

JC R
JC R

Reputation: 333

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>

Upvotes: 11

jafarbtech
jafarbtech

Reputation: 7013

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>

Upvotes: 0

user3758025
user3758025

Reputation: 79

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.

Upvotes: 7

d1jhoni1b
d1jhoni1b

Reputation: 8065

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

Upvotes: 39

Lothereus
Lothereus

Reputation: 3919

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>

Upvotes: 383

Alastair Pitts
Alastair Pitts

Reputation: 19601

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.

Upvotes: 145

Oscar_Wroclaski
Oscar_Wroclaski

Reputation: 107

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>

Upvotes: 4

Related Questions