HTML Video ended Property: Video Ended

HTML Video ended Property: Detecting Video Completion

The ended property of the HTML Video element provides a straightforward way to determine whether a video has finished playing. This read-only property returns a boolean value: true if the video playback has reached the end, and false otherwise. It’s particularly useful for triggering actions or displaying messages once a video completes.

Understanding the ended Property

The ended property is part of the HTMLVideoElement interface and is crucial for controlling the behavior of your web application based on the video’s playback state. By checking this property, you can execute specific functions, such as displaying a replay button, showing related content, or tracking user engagement.

Syntax

The syntax for accessing the ended property is simple:

const video = document.getElementById("myVideo");
const hasEnded = video.ended; // Returns true if the video has ended, false otherwise

Return Value

Basic Example: Checking if a Video Has Ended

Here’s a basic example demonstrating how to check if a video has ended and display a message:

<video id="videoEndedExample" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<p id="endedMessage" style="display: none;">Video has ended!</p>

<script>
  const video_ended_ex = document.getElementById("videoEndedExample");
  const endedMessage_ex = document.getElementById("endedMessage");

  video_ended_ex.addEventListener("ended", function () {
    endedMessage_ex.style.display = "block";
  });
</script>

In this example, a message is displayed when the video finishes playing.

Advanced Example: Triggering Actions After Video Ends

You can also trigger more complex actions, such as loading related content or showing a replay button:

<video id="videoEndedAction" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<button id="replayButton" style="display: none;">Replay Video</button>

<script>
  const video_ended_action = document.getElementById("videoEndedAction");
  const replayButton_ex = document.getElementById("replayButton");

  video_ended_action.addEventListener("ended", function () {
    replayButton_ex.style.display = "block";
    replayButton_ex.addEventListener("click", function () {
      video_ended_action.currentTime = 0;
      video_ended_action.play();
      replayButton_ex.style.display = "none";
    });
  });
</script>

In this case, a replay button appears after the video ends, allowing the user to restart the video.

Real-World Use Cases

The ended property is invaluable in various scenarios:

• E-learning Platforms: Displaying a “Course Completed” message or unlocking the next lesson.
• Video Advertising: Showing a call-to-action or redirecting to a product page after an ad finishes.
• Interactive Storytelling: Advancing the narrative based on the video’s completion.
• Content Recommendations: Suggesting related videos or articles after the current video ends.

Example: Implementing a Video Completion Tracker

Here’s an example of tracking video completions and displaying a custom message:

<video id="completionVideo" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<p id="completionMessage" style="display: none;">
  Congratulations! You've completed the video.
</p>

<script>
  const completionVideo_ex = document.getElementById("completionVideo");
  const completionMessage_ex = document.getElementById("completionMessage");

  completionVideo_ex.addEventListener("ended", function () {
    completionMessage_ex.style.display = "block";
  });
</script>

This script listens for the ended event and displays a congratulatory message upon video completion.

Using the ended Property with Other Video Properties

The ended property can be combined with other video properties like currentTime, duration, and loop to create more sophisticated video controls:

<video id="combinedVideo" width="320" height="176" controls loop>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<p id="loopMessage" style="display: none;">Video is looping.</p>

<script>
  const combinedVideo_ex = document.getElementById("combinedVideo");
  const loopMessage_ex = document.getElementById("loopMessage");

  combinedVideo_ex.addEventListener("ended", function () {
    if (combinedVideo_ex.loop) {
      loopMessage_ex.style.display = "block";
      setTimeout(function () {
        loopMessage_ex.style.display = "none";
      }, 2000);
    }
  });
</script>

In this example, if the video is set to loop, a message briefly appears indicating that the video is restarting.

Tips and Best Practices

• Event Listener: Use the ended event listener to reliably detect when a video finishes playing.
• Conditional Logic: Combine the ended property with conditional logic to create dynamic and responsive video controls.
• User Experience: Design your application to provide meaningful feedback to the user upon video completion.

Browser Support

The ended property is supported by all major browsers, ensuring consistent behavior across different platforms. 👍

Conclusion

The ended property of the HTML Video element is a valuable tool for web developers, providing a simple and effective way to detect video completion. By leveraging this property, you can create dynamic and engaging video experiences, tailored to your users’ needs. Whether it’s triggering actions, tracking completions, or enhancing user interaction, the ended property offers a wide range of possibilities for enhancing your web applications.