检测HTML5视频何时结束

你如何检测当HTML5 <video>元素已经完成播放?

363532 次浏览
小开

看看这个你需要知道的关于HTML5视频和音频的一切帖子在Opera Dev网站下的“我想滚动我自己的控件”部分。

以下是相关部分:

<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媒体元素(视频/音频)事件文档。

小开
最佳答案

你可以添加一个以“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>
小开

JQUERY

$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});

超文本标记语言

<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

事件类型HTML音频和视频DOM参考

小开

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

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

这里有一个简单的方法，它会在视频结束时触发。

<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'行中，将'ended'替换为'pause'或'play'来捕捉这些事件。

小开

你可以添加监听所有视频事件，其中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>

小开

你可以简单地添加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>

提交答案