<video>元素何时播放完毕？#1 楼
您可以添加带有'end'作为第一个参数的事件侦听器像这样：
<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>
评论
这是唯一在整个互联网上都可以播放的视频。太棒了！
–艾萨克
2012年6月8日15:36
为什么检查e是否存在？
–艾伦·斯特普斯（Allan Stepps）
13年8月7日在0:12
@AllanStepps据我所知，if（！e）{e = window.event; }声明最初包含此答案是IE特定代码，用于从IE早期版本上附加了attachEvent的事件处理程序中获取最新事件。由于在这种情况下，处理程序附加了addEventListener（而那些早期版本的IE与处理HTML5视频的人无关），因此完全没有必要，因此我将其删除。
–马克·阿默里（Mark Amery）
15年7月15日在20:09
使用此方法时需要注意的一点是，OS X（10.11）的El Capitan版本上的Safari无法捕获“结束”事件。因此，在这种情况下，我需要使用'timeupdate'事件，然后检查this.current时间何时再次等于0。
–凸轮
17年2月1日在23:03
还要记住将loop设置为false，否则不会触发end事件。
–以色列莫拉莱斯
17年10月31日在5:30
#2 楼
在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媒体元素（视频/音频）事件文档。评论
我已尝试按照与您介绍的方式完全相同的方式捕获“结束”事件，但是此事件未触发。我在Safari 5.0.4（6533.20.27）下
– AntonAL
2011年4月11日15:25
@AntonAL：如果您遇到问题，我会将其发布为新问题。
–阿拉斯泰尔·皮茨（Alastair Pitts）
2011年4月17日在22:44
@All：您也可以这样做。
#3 楼
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参考
评论
-1。自2011年发布jQuery 1.7以来，.on（）比.bind（）更为可取。此外，请正确格式化代码。
–马克·阿默里（Mark Amery）
15年7月15日在19:58
#4 楼
这是一个完整的示例，希望对您有帮助=）。<!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>
#5 楼
这是一种简单的方法，可在视频结束时触发。<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>
在“事件监听器”行中，将“结束”一词替换为“暂停”或“播放”以捕获这些事件。
评论
您在此JS代码中存在语法错误。参数列表后缺少）
– frzsombor
15年11月27日在13:28
#6 楼
您可以简单地将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>
#7 楼
您可以添加侦听器（不包括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>
评论
Apple带有测试页的非常有用的文档：developer.apple.com/library/safari/#samplecode / ...您想了解的有关HTML5视频事件的所有信息！