Câu trả lời:
Bạn có thể thêm một người nghe sự kiện với 'kết thúc' là thông số đầu tiên
Như thế này :
<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>if(!e) { e = window.event; }tuyên bố rằng câu trả lời này ban đầu bao gồm là mã dành riêng cho IE để nhận sự kiện mới nhất từ bên trong một trình xử lý sự kiện được đính kèm attachEventtrên các phiên bản đầu tiên của IE. Vì trong trường hợp này, trình xử lý được đính kèm addEventListener(và những phiên bản IE đầu tiên đó không liên quan đến những người giao dịch với video HTML5), nên nó hoàn toàn không cần thiết và tôi đã gỡ bỏ nó.
Hãy xem tất cả mọi thứ bạn cần biết về bài đăng Video và âm thanh HTML5 tại trang web Opera Dev trong phần "Tôi muốn cuộn các điều khiển của riêng mình".
Đây là phần thích hợp:
<video src="video.ogv">
video not supported
</video>sau đó bạn có thể sử dụng:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>onendedlà một sự kiện tiêu chuẩn HTML5 trên tất cả các yếu tố truyền thông, xem tài liệu sự kiện về yếu tố truyền thông HTML5 (video / âm thanh) .
YÊU CẦU
$("#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>Các loại sự kiện Tham chiếu DOM âm thanh và video HTML
.on()đã được ưa thích hơn .bind()kể từ jQuery 1.7, được phát hành vào năm 2011. Ngoài ra, vui lòng định dạng mã của bạn đúng cách.
Đây là một ví dụ đầy đủ, tôi hy vọng nó sẽ giúp =).
<!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>Đây là một cách tiếp cận đơn giản kích hoạt khi video kết thúc.
<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> Trong dòng 'EventListener' thay thế từ 'đã kết thúc' bằng 'tạm dừng' hoặc 'phát' để ghi lại các sự kiện đó.
Bạn có thể thêm người biết lắng nghe tất cả các sự kiện phim nicluding ended, loadedmetadata, timeupdatenơi endedchức năng được gọi khi video kết thúc
$("#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>