เหตุการณ์ onemptied จะถูกกระตุ้นเมื่อสื่อ (วิดีโอ/เสียง) กลายเป็นสถานะว่างเปล่า (Empty) หรือไม่พร้อมใช้งาน กรณีที่อาจเกิดขึ้น:
- Network Error ระหว่างโหลด
- Source ถูกลบ/เปลี่ยน (
src = '') - Media Element ถูกรีเซ็ต (
load()) - Playlist ว่าง (ไม่มี Source)
- Connection Lost ขณะโหลด
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls onemptied="display()">
<source src="/html5/foo.ogg" type="video/ogg" />
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ video
</video>
<script>
function display() {
alert("ขออภัย! ไม่พบเนื้อหาเล่น (Empty playlist/Error)");
// แสดง UI Fallback หรือ Retry Button
showRetryOption();
}
</script>
</body>
</html>สถานะ Media Element (readyState)
| Constant | Value | ความหมาย |
|---|---|---|
| HAVE_NOTHING | 0 | ไม่มีข้อมูลเลย (Empty) - onemptied ยิงที่นี่ |
| HAVE_METADATA | 1 | มี Metadata (Duration, Dimensions) |
| HAVE_CURRENT_DATA | 2 | มีข้อมูลตำแหน่งปัจจุบัน (Can render frame) |
| HAVE_FUTURE_DATA | 3 | มีข้อมูลเพียงพอเล่นต่อได้เล็กน้อย |
| HAVE_ENOUGH_DATA | 4 | มีข้อมูลพอเล่นต่อเนื่อง (canplaythrough) |
การจัดการ Error ร่วมกับ onerror
video.onemptied = () => {
console.log('Media became empty');
// ตรวจสอบ error
if (video.error) {
handleMediaError(video.error);
}
};
video.onerror = () => {
const err = video.error;
const messages = {
1: 'MEDIA_ERR_ABORTED: ผู้ใช้ยกเลิก/หยุดโหลด',
2: 'MEDIA_ERR_NETWORK: Network Error',
3: 'MEDIA_ERR_DECODE: Decode Error (Format ไม่รองรับ/Corrupt)',
4: 'MEDIA_ERR_SRC_NOT_SUPPORTED: Format ไม่รองรับ'
};
alert(messages[err.code] || 'Unknown Error');
};