Html 检测 HTML5 视频何时结束
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2741493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect when an HTML5 video finishes
提问by Brent
How do you detect when a HTML5 <video>element has finished playing?
如何检测 HTML5<video>元素何时播放完毕？
回答by Lothereus
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>
回答by Alastair Pitts
Have a look at this Everything You Need to Know About HTML5 Video and Audiopost at the Opera Dev site under the "I want to roll my own controls" section.
在 Opera 开发站点的“我想推出我自己的控件”部分下查看关于 HTML5 视频和音频您需要了解的一切帖子。
This is the pertinent section:
这是相关部分：
<video src="video.ogv">
video not supported
</video>
then you can use:
那么你可以使用：
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onendedis a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) eventsdocumentation.
onended是所有媒体元素上的 HTML5 标准事件，请参阅HTML5 媒体元素（视频/音频）事件文档。
回答by d1jhoni1b
JQUERY
查询
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
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
回答by Oscar_Wroclaski
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>
回答by user3758025
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.
在 'EventListener' 行中，用 'pause' 或 'play' 替换单词 'ended' 以捕获这些事件。
回答by JC R
You can simply add onended="myFunction()"to your video tag.
您可以简单地添加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>
回答by jafarbtech
You can add listener all video events nicluding ended, loadedmetadata, timeupdatewhere endedfunction gets called when video ends
您可以添加监听所有视频事件nicludingended, 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>