Detect when an HTML5 video finishes

前端 未结 7 1874
死守一世寂寞
死守一世寂寞 2020-11-22 05:45

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

相关标签:
7条回答
  • 2020-11-22 06:20

    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>
    
    0 讨论(0)
  • 2020-11-22 06:26

    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>

    0 讨论(0)
  • 2020-11-22 06: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>
    
    0 讨论(0)
  • 2020-11-22 06:32

    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>
    
    0 讨论(0)
  • 2020-11-22 06:35

    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

    0 讨论(0)
  • 2020-11-22 06:36

    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.

    0 讨论(0)
提交回复
热议问题