เหตุการณ์ ontimeupdate จะถูกกระตุ้นซ้ำๆ ขณะที่ตำแหน่งการเล่นของสื่อ (วิดีโอ/เสียง) เปลี่ยนแปลง ไม่ว่าจะเป็นการเล่นปกติ การข้ามไปมาหรือการเร็ว/ช้า
ตัวอย่างการใช้งาน
ตัวอย่างแสดงเวลาการเล่นปัจจุบันแบบเรียลไทม์:
<!DOCTYPE html>
<html>
<body>
<h2 id="test">เล่น</h2>
<video id="myid" width="320" height="176" controls ontimeupdate="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 = "ตำแหน่งปัจจุบัน: " + document.getElementById("myid").currentTime + " วินาที";
}
</script>
</body>
</html>การประยุกต์ใช้
- สร้างแถบความคืบหน้า (progress bar) แบบกำหนดเอง
- ซิงโครไนซ์เนื้อหาอื่นกับวิดีโอ (เช่น คำอธิบายประกอบ)
- บันทึกตำแหน่งที่ผู้ใช้ดูล่าสุด
