Detect when an HTML5 video finishes

Question

How do you detect when a HTML5  lt video gt  element has finished playing

User · Answer

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

_x000D_

$("#myVideo").on("ended", function() {_x000D_
   //TO DO: Your code goes here..._x000D_
      alert("Video Finished");_x000D_
});_x000D_
_x000D_
$("#myVideo").on("loadedmetadata", function() {_x000D_
      alert("Video loaded");_x000D_
  this.currentTime = 50;//50 seconds_x000D_
   //TO DO: Your code goes here..._x000D_
});_x000D_
_x000D_
_x000D_
$("#myVideo").on("timeupdate", function() {_x000D_
  var cTime=this.currentTime;_x000D_
  if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once_x000D_
      alert("Video played "+cTime+" minutes");_x000D_
   //TO DO: Your code goes here..._x000D_
  var perc=cTime * 100 / this.duration;_x000D_
  if(perc % 10 == 0)//Alerts when every 10% watched_x000D_
      alert("Video played "+ perc +"%");_x000D_
});

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
  <video id="myVideo" controls="controls">_x000D_
    <source src="your_video_file.mp4" type="video/mp4">_x000D_
      <source src="your_video_file.mp4" type="video/ogg">_x000D_
        Your browser does not support HTML5 video._x000D_
  </video>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

User · Answer

Here is a simple approach which triggers when the video ends     lt html gt   lt body gt        lt video id  myVideo  controls  controls  gt           lt source src  video mp4  type  video mp4  gt          etc          lt  video gt    lt  body gt   lt script type  text javascript  gt       document getElementById  myVideo   addEventListener  ended   function e             alert  The End              lt  script gt   lt  html gt     In the  EventListener  line substitute the word  ended  with  pause  or  play  to capture those events as well

User · Answer

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    lt video src  video ogv  gt       video not supported  lt  video gt    then you can use    lt script gt      var video   document getElementsByTagName  video   0        video onended   function e            Do things here            lt  script gt    onended is a HTML5 standard event on all media elements  see the HTML5 media element  video audio  events documentation

User · Answer

JQUERY      video1   bind  ended   function          TO DO  Your code goes here          HTML   lt video id  video1  width  420  gt     lt source src  path filename mp4  type  video mp4  gt    Your browser does not support HTML5 video   lt  video gt    Event types HTML Audio and Video DOM Reference

User · Answer

Here is a full example  I hope it helps       lt  DOCTYPE html gt    lt html gt    lt body gt     lt video id  myVideo  controls  controls  gt     lt source src  your video file mp4  type  video mp4  gt     lt source src  your video file mp4  type  video ogg  gt    Your browser does not support HTML5 video   lt  video gt    lt script type  text javascript  gt      document getElementById  myVideo   addEventListener  ended  myHandler false       function myHandler e            if  e    e   window event            alert  Video Finished           lt  script gt   lt  body gt    lt  html gt

User · Answer

You can simply add onended  myFunction    to your video tag    lt video onended  myFunction    gt          Your browser does not support the video tag   lt  video gt    lt script type  text javascript  gt    function myFunction        console log  The End         lt  script gt

User · Answer

You can add an event listener with  ended  as first param  Like this     lt video src  video ogv  id  myVideo  gt    video not supported  lt  video gt    lt script type  text javascript  gt      document getElementById  myVideo   addEventListener  ended  myHandler false       function myHandler e               What you want to do after the event        lt  script gt

[html] Detect when an HTML5 video finishes

Examples related to html

Examples related to html5-video