检测HTML5视频何时结束

你可以添加监听所有视频事件包括结束，加载元数据，时间更新结束函数被调用时，视频结束

$("#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>

2016-12-08 19:24:54

你可以添加一个以“ended”作为第一个参数的事件监听器

像这样:

<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>

2010-05-21 09:32:15

你可以简单地添加onended="myFunction()"到你的视频标签。

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>

2019-08-23 13:40:47

这里有一个完整的例子，我希望它有助于=)。

<!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>

2014-03-14 08:28:00

你可以添加监听所有视频事件包括结束，加载元数据，时间更新结束函数被调用时，视频结束

$("#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>

2016-12-08 19:24:54

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>

事件类型HTML音频和视频DOM引用

2013-01-13 06:52:19

检测HTML5视频何时结束

推荐文章

最新文章

标签