รันสคริปต์เมื่อโหลดข้อมูลสื่อ (Media Data) เสร็จใน HTML

ใช้เหตุการณ์ onloadeddata เพื่อรันสคริปต์เมื่อโหลดข้อมูลสื่อ (media data) เสร็จ คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานเหตุการณ์ onloadeddata:

ตัวอย่าง

โค้ดต่อไปนี้สร้างกล่องแจ้งเตือนเมื่อวิดีโอโหลดเสร็จ:

<!DOCTYPE html> 
<html> 
  <body> 
    <video controls onloadeddata="display()"> 
      <source src="/html5/foo.ogg" type="video/ogg" /> 
      <source src="/html5/foo.mp4" type="video/mp4" /> 
      เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบวิดีโอ 
    </video> 
    <script> 
      function display() { 
        alert("โหลดเสร็จ!"); 
      } 
    </script> 
  </body> 
</html>

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

1. loadstart - เริ่มโหลด
2. durationchange - ระยะเวลาเปลี่ยน
3. loadedmetadata - โหลดข้อมูลเมตาเสร็จ (ขนาด, ระยะเวลา)
4. loadeddata - โหลดเฟรมแรกเสร็จ (พร้อมเล่นได้)
5. canplay - เล่นได้แต่อาจต้องบัฟเฟอร์
6. canplaythrough - เล่นจบได้โดยไม่ต้องหยุดบัฟเฟอร์