检测HTML5视频结束的时间
如何检测HTML5 <video>元素何时完成播放？
你可以添加一个事件监听器作为第一个参数“结束”
喜欢这个 ：
<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>
在“我想滚动我自己的控件”一节下，浏览Opera Dev网站上关于HTML5视频和音频所需的一切 。
这是相关的部分：
<video src="video.ogv"> video not supported </video>
那么你可以使用：
<script> var video = document.getElementsByTagName('video')[0]; video.onended = function(e) { /*Do things here!*/ }; </script>
onended是所有媒体元素上的HTML5标准事件，请参阅HTML5媒体元素（视频/音频）事件文档。
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参考
这是一个简单的方法，当视频结束时触发。
<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>
在“EventListener”行中，用“暂停”或“播放”替代“已结束”一词来捕获这些事件。
这里是一个完整的例子，我希望它有帮助=）。
<!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>
你可以添加监听器所有的视频事件nicluding ended, loadedmetadata, timeupdate当视频结束时调用ended函数
$("#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>
