Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video ended Property
The HTML DOM Video ended property returns a boolean value indicating whether a video has finished playing. It returns true when the video has reached its end, and false otherwise. This property is read-only and useful for detecting when video playback is complete.
Syntax
Following is the syntax for accessing the ended property −
videoElement.ended
Return Value
The ended property returns a Boolean value −
-
true− The video has reached its end -
false− The video is still playing or paused before the end
Example − Checking Video End Status
Following example demonstrates how to use the ended property to check if a video has finished playing −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video ended Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { text-align: center; }
video { margin: 10px; }
button { padding: 8px 15px; margin: 5px; border-radius: 5px; }
#result { margin: 15px; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<h2>Video Ended Property Demo</h2>
<video id="myVideo" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="checkEnded()">Check if Video Ended</button>
<button onclick="resetVideo()">Reset Video</button>
<div id="result"></div>
</div>
<script>
const video = document.getElementById("myVideo");
const result = document.getElementById("result");
function checkEnded() {
if (video.ended) {
result.textContent = "? Video has ended";
result.style.color = "green";
} else {
result.textContent = "? Video is still playing or paused";
result.style.color = "orange";
}
}
function resetVideo() {
video.currentTime = 0;
result.textContent = "Video reset to beginning";
result.style.color = "blue";
}
</script>
</body>
</html>
The output displays a video player with buttons to check the ended status and reset the video to the beginning.
Example − Auto-detecting Video End
Following example shows how to automatically detect when a video ends using an event listener −
<!DOCTYPE html>
<html>
<head>
<title>Auto-detect Video End</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
video { margin: 15px; }
#status { font-size: 18px; font-weight: bold; margin: 10px; }
.ended { color: red; }
.playing { color: green; }
</style>
</head>
<body>
<h2>Video End Detection</h2>
<video id="videoPlayer" width="350" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="status">Video Status: Not Started</div>
<script>
const video = document.getElementById("videoPlayer");
const status = document.getElementById("status");
// Event listener for video end
video.addEventListener('ended', function() {
status.textContent = "Video Status: Ended";
status.className = "ended";
});
// Event listener for video play
video.addEventListener('play', function() {
status.textContent = "Video Status: Playing";
status.className = "playing";
});
// Event listener for video pause
video.addEventListener('pause', function() {
if (!video.ended) {
status.textContent = "Video Status: Paused";
status.className = "";
}
});
</script>
</body>
</html>
This example automatically updates the status display when the video ends, plays, or pauses.
Example − Time Remaining Calculator
Following example demonstrates calculating remaining time using the ended property −
<!DOCTYPE html>
<html>
<head>
<title>Video Time Remaining</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
video { margin: 15px; }
button { padding: 10px 20px; margin: 10px; border-radius: 5px; }
#timeInfo { font-size: 16px; margin: 15px; }
</style>
</head>
<body>
<h2>Video Time Information</h2>
<video id="timeVideo" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="getTimeRemaining()">Get Time Remaining</button>
<div id="timeInfo"></div>
<script>
const video = document.getElementById("timeVideo");
const timeInfo = document.getElementById("timeInfo");
function getTimeRemaining() {
if (video.ended) {
timeInfo.innerHTML = "<strong>Video has ended!</strong>";
timeInfo.style.color = "red";
} else {
const remaining = video.duration - video.currentTime;
const minutes = Math.floor(remaining / 60);
const seconds = Math.floor(remaining % 60);
timeInfo.innerHTML = `Time remaining: ${minutes}:${seconds.toString().padStart(2, '0')}`;
timeInfo.style.color = "blue";
}
}
</script>
</body>
</html>
The output shows the remaining time in minutes and seconds, or displays "Video has ended!" when the ended property is true.
Browser Compatibility
The ended property is supported in all modern browsers that support HTML5 video, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the HTML5 video specification.
Key Points
- The ended property is read-only and cannot be set programmatically
- It returns
trueonly when the video has naturally reached its end - Seeking to the end of a video does not automatically set ended to
true - The property resets to
falsewhen the video is replayed or seeked to an earlier position - Use the
endedevent listener for automatic detection of video completion
Conclusion
The HTML DOM Video ended property provides a simple boolean check to determine if a video has finished playing. It returns true when playback is complete and false otherwise. This property is essential for implementing video completion tracking, auto-play sequences, and user interface updates based on playback status.
212 Views
