เมื่อเร็ว ๆ นี้ฉันกำลังทำงานในโครงการที่ต้องมีการตรวจสอบกิจกรรมการเล่นวิดีโอและสามารถพิมพ์บันทึกบันทึกได้ หลังจากความคิดบางอย่างฉันใช้ฟังก์ชั่นนี้โดยใช้ JavaScript และรหัสมีดังนี้:
html:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> หลายแหล่ง </title>
</head>
<body>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" ควบคุมการเล่นอัตโนมัติ> </video>
</body>
</html>
JS:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.addeventListener ("โหลด", getVideoEvent);
ฟังก์ชั่น getVideOevent () {
var videos = document.getElementsByTagname ("วิดีโอ");
สำหรับ (var i = 0; i <videos.length; i ++) {
showeventLog ("วิดีโอ"+(i+1), วิดีโอ [i]);
-
-
ฟังก์ชั่น showeventlog (videonum, สื่อ) {
EventTester = function (e) {
media.addeventListener (e, function () {
console.log (videonum+":"+e);
-
-
EventTester ("LoadStart"); // ไคลเอนต์เริ่มร้องขอข้อมูล
EventTester ("ความคืบหน้า"); // ลูกค้ากำลังขอข้อมูล
EventTester ("ระงับ"); // ดาวน์โหลดล่าช้า
EventTester ("Abort"); // ไคลเอนต์ยุติการดาวน์โหลดอย่างแข็งขัน (ไม่ได้เกิดจากข้อผิดพลาด)
EventTester ("ข้อผิดพลาด"); // พบข้อผิดพลาดในขณะที่ขอข้อมูล
EventTester ("หยุด"); // หยุดความเร็วเครือข่าย
EventTester ("Play"); // ทริกเกอร์เมื่อเล่น () และเล่นอัตโนมัติเริ่มเล่น
EventTester ("หยุดชั่วคราว"); // หยุดชั่วคราว () ทริกเกอร์
EventTester ("LoadedMetadata"); // ได้รับความยาวของทรัพยากรได้สำเร็จ
EventTester ("LoadedData"); -
EventTester ("รอ"); // รอข้อมูลไม่ใช่ข้อผิดพลาด
EventTester ("เล่น"); // เริ่มเล่น
EventTester ("Canplay"); // สามารถเล่นได้ แต่อาจหยุดชั่วคราวเนื่องจากการโหลดตรงกลาง
EventTester ("canplaythrough"); // สามารถเล่นได้ทุกเพลงจะถูกโหลด
EventTester ("ค้นหา"); // การค้นหา
EventTester ("แสวงหา"); // ค้นหาเสร็จสิ้น
EventTester ("TimeUpdate"); // การเปลี่ยนแปลงเวลาเล่น
EventTester ("จบ"); // การเล่นจบลง
EventTester ("Retechange"); // การเปลี่ยนแปลงอัตราการเล่น
EventTester ("Durationchange"); // การเปลี่ยนแปลงความยาวของทรัพยากร
Eventtester ("Volumechange"); // การเปลี่ยนแปลงระดับเสียง
-
</script>
เพื่อนโปรดอ่านแนวคิดในบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ