Detecting HTML5 Video Playback Completion: A Comprehensive Guide to the ended Event

Overview of HTML5 Video Playback Completion Detection

In modern web development, HTML5 video elements have become core components for multimedia content presentation. Accurately detecting video playback completion is crucial for implementing features such as auto-playing next episodes, displaying related recommendations, and tracking completion rates. The HTML5 standard provides the dedicated ended event for this purpose, allowing developers to precisely determine when video playback reaches its end.

Basic Characteristics of the ended Event

The ended event is a standard event of the HTMLMediaElement interface, triggered when media playback reaches the end or stops due to insufficient data. This event possesses the following important characteristics:

• Non-cancelable: The event cannot be prevented once triggered
• Non-bubbling: The event does not propagate to parent elements
• Standard compliant: Adheres to W3C HTML5 media element event specifications
• Widely supported: Implemented in mainstream browsers since July 2015

Comparison of Event Listening Methods

Using the addEventListener Method

This is the recommended standard approach for event listening, offering better flexibility and maintainability:

const video = document.getElementById("myVideo");
video.addEventListener("ended", function(event) {
    console.log("Video playback completed");
    // Add post-playback logic here
});

Using the onended Property

This direct assignment approach is more concise and suitable for simple scenarios:

const video = document.querySelector("video");
video.onended = function(event) {
    console.log("Video stopped either because it has finished playing or no further data is available");
};

Practical Implementation Examples

Below is a complete implementation example for video playback completion detection:

<video src="video.mp4" id="myVideo" controls>
  Your browser does not support HTML5 video
</video>

<script>
const videoElement = document.getElementById("myVideo");

// Add ended event listener using addEventListener
videoElement.addEventListener("ended", handleVideoEnd);

function handleVideoEnd(e) {
    // Business logic after playback completion
    console.log("Video ended at: " + new Date().toLocaleString());
    
    // Example: Automatically show related video recommendations
    showRelatedVideos();
    
    // Example: Update playback statistics
    updatePlaybackStatistics();
}

function showRelatedVideos() {
    // Implementation for displaying related video recommendations
    const recommendationSection = document.createElement("div");
    recommendationSection.innerHTML = "<h3>Recommended Videos</h3><ul><li>Related Video 1</li><li>Related Video 2</li></ul>";
    document.body.appendChild(recommendationSection);
}

function updatePlaybackStatistics() {
    // Implementation for updating playback statistics
    console.log("Playback statistics updated");
}
</script>

Important Considerations and Best Practices

Special Case: Looping Playback

When the video element's loop property is set to true and the playback rate is non-negative, the ended event will not trigger. This occurs because the video loops indefinitely and never truly "ends."

Performance Considerations for Event Handlers

In single-page applications, it's important to remove event listeners when they are no longer needed to prevent memory leaks:

// Add event listener
video.addEventListener("ended", videoEndHandler);

// Remove event listener when appropriate
function cleanup() {
    video.removeEventListener("ended", videoEndHandler);
}

Error Handling

It's recommended to also listen for the error event to handle potential exceptions during video loading or playback:

video.addEventListener("error", function(e) {
    console.error("Video playback error: ", e);
});

Browser Compatibility

The ended event has excellent compatibility across modern browsers:

• Chrome: Full support
• Firefox: Full support
• Safari: Full support
• Edge: Full support
• Internet Explorer: Support in version 9+

Related Event Extensions

Beyond the ended event, HTML5 video elements provide a rich event system that developers can combine as needed:

• play: Playback starts
• pause: Playback pauses
• timeupdate: Playback time updates
• loadeddata: Media data loading completes
• waiting: Playback waits due to buffering

Conclusion

HTML5's ended event provides a standardized solution for video playback completion detection. By properly utilizing event listening mechanisms, developers can create more intelligent and user-friendly video playback experiences. In practical projects, it's recommended to combine with other media events to establish comprehensive video playback control logic.