Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เหตุการณ์ onpause: รันสคริปตเมื่อสื่อถูกหยุดพัก

เหตุการณ์ onpause จะถูกกระตุ้นเมื่อสื่อ (วิดีโอ/เสียง) ถูกหยุดพัก ไม่ว่าจะเป็นการกด Pause โดยผู้ใช้ หรือผ่านโปรแกรม (video.pause())

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <h2 id="test">เล่น</h2>
    <video id="myid" width="320" height="176" controls onpause="myFunction()">
        <source src="/html5/foo.ogg" type="video/ogg" />
        <source src="/html5/foo.mp4" type="video/mp4" />
        เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ video
    </video>
    <script>
        function myFunction() {
            document.getElementById("test").innerHTML = "สื่อถูกหยุดพัก!";
            // บันทึกตำแหน่งที่หยุด
            const pos = document.getElementById("myid").currentTime;
            localStorage.setItem('lastPosition', pos);
        }
    </script>
</body>
</html>

ลำดับเหตุการณ์การเล่นสื่อ

  1. onloadstart - เริ่มโหลด
  2. oncanplay - พร้อมเล่นได้
  3. onplaying - เริ่มเล่นจริง
  4. ontimeupdate - ตำแหน่งเปลี่ยน (ซ้ำ)
  5. onpause - หยุดพัก (ที่นี่)
  6. onended - จบสิ้นสุด

การประยุกต์ใช้

  • บันทึกตำแหน่งดูล่าสุด (Resume later)
  • Analytics: วัด Engagement (ดูกี่ % แล้วหยุด)
  • Auto-save สถานะการเล่น
  • ซิงโครไนซ์ Pause ระหว่างหลายวิดีโอ
  • แสดง UI เพิ่มเติมเมื่อหยุด (Related videos, Ads)

คู่กับ onplay

video.onplay = () => console.log('เริ่ม/เล่นต่อ');
video.onpause = () => console.log('หยุดพัก');