คุณตรวจพบได้อย่างไรเมื่อ<video>องค์ประกอบHTML5 เล่นเสร็จแล้ว?
คำตอบ:
คุณสามารถเพิ่มผู้ฟังเหตุการณ์ด้วย 'สิ้นสุด' เป็นพารามิเตอร์แรก
แบบนี้ :
<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; }ข้อความที่คำตอบแรกรวมอยู่นี้คือรหัสเฉพาะ IE สำหรับรับเหตุการณ์ล่าสุดจากภายในตัวจัดการเหตุการณ์ที่แนบมากับattachEventIE เวอร์ชันเริ่มต้น เนื่องจากในกรณีนี้ตัวจัดการจะถูกแนบกับaddEventListener(และ IE รุ่นแรกนั้นไม่เกี่ยวข้องกับผู้ที่เกี่ยวข้องกับวิดีโอ HTML5) มันไม่จำเป็นอย่างสมบูรณ์และฉันได้ลบมันออกไปแล้ว
ดูทุกสิ่งที่คุณต้องรู้เกี่ยวกับโพสต์วิดีโอและเสียง 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 (วิดีโอ / เสียง)
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
.on()เป็นที่ต้องการมา.bind()ตั้งแต่ jQuery 1.7 ซึ่งเผยแพร่ในปี 2011 นอกจากนี้โปรดจัดรูปแบบโค้ดของคุณอย่างถูกต้อง
นี่เป็นตัวอย่างที่สมบูรณ์ฉันหวังว่ามันจะช่วย =)
<!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' จะแทนที่คำว่า 'ลงท้าย' ด้วย 'หยุดชั่วคราว' หรือ 'เล่น' เพื่อบันทึกเหตุการณ์เหล่านั้นเช่นกัน
คุณสามารถเพิ่มลง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>คุณสามารถเพิ่มฟังเหตุการณ์วิดีโอทั้งหมด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>