เหตุการณ์ 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>
ลำดับเหตุการณ์การเล่นสื่อ
onloadstart- เริ่มโหลดoncanplay- พร้อมเล่นได้onplaying- เริ่มเล่นจริงontimeupdate- ตำแหน่งเปลี่ยน (ซ้ำ)onpause- หยุดพัก (ที่นี่)onended- จบสิ้นสุด
การประยุกต์ใช้
- บันทึกตำแหน่งดูล่าสุด (Resume later)
- Analytics: วัด Engagement (ดูกี่ % แล้วหยุด)
- Auto-save สถานะการเล่น
- ซิงโครไนซ์ Pause ระหว่างหลายวิดีโอ
- แสดง UI เพิ่มเติมเมื่อหยุด (Related videos, Ads)
คู่กับ onplay
video.onplay = () => console.log('เริ่ม/เล่นต่อ');
video.onpause = () => console.log('หยุดพัก');