เหตุการณ์ onended: รันสคริปตเมื่อสื่อเล่นจบ

เหตุการณ์ onended จะถูกกระตุ้นเมื่อการเล่นสื่อ (วิดีโอ/เสียง) จบสิ้นสุดถึงตอนท้าย ใช้สำหรับแสดงข้อความขอบคุณ, เล่นวิดีโอถัดไป, แสดง Related Content, หรือบันทึกสถิติการดูจบ

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

<!DOCTYPE HTML>
<html>
<body>
    <video width="300" height="200" controls onended="display()">
        <source src="/html5/foo.ogg" type="video/ogg" />
        เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ video
    </video>
    <script>
        function display() {
            alert("ขอบคุณที่ดูจบครับ! ติดตามเราต่อไปนะ!");
            // หรือ: loadNextVideo();
            // หรือ: showRelatedVideos();
        }
    </script>
</body>
</html>

การประยุกต์ใช้จริง (Real-world)

const video = document.getElementById('myVideo');

video.onended = () => {
    // 1. Analytics: บันทึกว่าดูจบ
    trackEvent('video_complete', { videoId: video.dataset.id });
    
    // 2. Auto-play Next (Playlist)
    const nextVideo = getNextVideo();
    if (nextVideo) {
        video.src = nextVideo.url;
        video.load();
        video.play().catch(() => {}); // ต้องมี user gesture หรือ muted
    }
    
    // 3. UI: แสดง Related/Up Next
    showUpNextPanel();
    
    // 4. Unlock Achievement / Progress
    updateProgress('completed');
};

เหตุการณ์ Media Lifecycle สรุป

loadstart → durationchange → loadedmetadata → loadeddata → canplay → canplaythrough
    ↓
playing → timeupdate (×many) → [pause/waiting/seeking] → playing → timeupdate...
    ↓
ended ← (เมื่อเล่นจบ)

หมายเหตุ: Loop Attribute

หากมี loop แท็ก onended จะยิง ทุกรอบ ที่วิดีโอจบและวนเล่นใหม่