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 duration Property
The HTML DOM Video duration property returns the duration of a video in seconds as a numeric value. This read-only property is essential for creating custom video controls, progress bars, and displaying video information to users.
Note − For live streams, the duration property returns Infinity because live content has no predefined end time.
Syntax
Following is the syntax for accessing the duration property −
videoObject.duration
Return Value
The duration property returns a numeric value representing −
The length of the video in seconds (for recorded videos)
Infinityfor live streamsNaN(Not a Number) if the video metadata is not loaded
Example − Getting Video Duration
Following example demonstrates how to retrieve and display the duration of a video −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video duration Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { text-align: center; max-width: 600px; margin: 0 auto; }
video { margin: 10px 0; }
button { padding: 10px 15px; margin: 5px; border-radius: 5px; }
#result { margin: 10px 0; font-weight: bold; color: #333; }
</style>
</head>
<body>
<div class="container">
<h2>Video Duration Example</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="getDuration()">Get Video Duration</button>
<button onclick="formatDuration()">Get Formatted Duration</button>
<div id="result"></div>
</div>
<script>
function getDuration() {
var video = document.getElementById("myVideo");
var duration = video.duration;
if (isNaN(duration)) {
document.getElementById("result").innerHTML = "Video metadata not loaded yet";
} else if (duration === Infinity) {
document.getElementById("result").innerHTML = "This is a live stream (Infinity)";
} else {
document.getElementById("result").innerHTML = "Duration: " + duration.toFixed(2) + " seconds";
}
}
function formatDuration() {
var video = document.getElementById("myVideo");
var duration = video.duration;
if (!isNaN(duration) && duration !== Infinity) {
var minutes = Math.floor(duration / 60);
var seconds = Math.floor(duration % 60);
document.getElementById("result").innerHTML = "Formatted Duration: " + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
} else {
document.getElementById("result").innerHTML = "Cannot format duration";
}
}
</script>
</body>
</html>
The output will show the video player with buttons to get duration information −
Video Duration Example [Video Player with controls] [Get Video Duration] [Get Formatted Duration] Duration: 10.53 seconds (or formatted as 0:10)
Example − Waiting for Metadata to Load
The duration property is only available after the video metadata has loaded. Here's how to handle this properly −
<!DOCTYPE html>
<html>
<head>
<title>Duration with Metadata Event</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.info { background: #f0f8ff; padding: 15px; border-left: 4px solid #007acc; margin: 10px 0; }
</style>
</head>
<body>
<h2>Auto-detect Video Duration</h2>
<video id="autoVideo" 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>
<div class="info" id="info">Loading video metadata...</div>
<script>
var video = document.getElementById("autoVideo");
var info = document.getElementById("info");
// Event fired when video metadata is loaded
video.addEventListener("loadedmetadata", function() {
var duration = video.duration;
var minutes = Math.floor(duration / 60);
var seconds = Math.floor(duration % 60);
info.innerHTML = "Video loaded! Duration: " + minutes + ":" +
(seconds < 10 ? "0" : "") + seconds +
" (" + duration.toFixed(2) + " seconds)";
});
// Handle loading errors
video.addEventListener("error", function() {
info.innerHTML = "Error loading video metadata";
});
</script>
</body>
</html>
This example automatically displays the duration information once the video metadata loads −
Auto-detect Video Duration [Video Player with controls] Video loaded! Duration: 0:10 (10.53 seconds)
Practical Use Cases
The duration property is commonly used for −
Progress bars − Calculate percentage of video watched
Time displays − Show total video length in player controls
Playlist management − Calculate total playlist duration
Video validation − Check if video meets length requirements
Example − Simple Progress Bar
<!DOCTYPE html>
<html>
<head>
<title>Video Progress Bar</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.progress-container { width: 400px; height: 10px; background: #ddd; margin: 10px 0; }
.progress-bar { height: 100%; background: #007acc; width: 0%; transition: width 0.1s; }
.time-info { margin: 5px 0; }
</style>
</head>
<body>
<h2>Video with Custom Progress</h2>
<video id="progressVideo" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="time-info" id="timeInfo">0:00 / 0:00</div>
<script>
var video = document.getElementById("progressVideo");
var progressBar = document.getElementById("progressBar");
var timeInfo = document.getElementById("timeInfo");
video.addEventListener("timeupdate", function() {
if (video.duration) {
var progress = (video.currentTime / video.duration) * 100;
progressBar.style.width = progress + "%";
var current = formatTime(video.currentTime);
var total = formatTime(video.duration);
timeInfo.textContent = current + " / " + total;
}
});
function formatTime(seconds) {
var mins = Math.floor(seconds / 60);
var secs = Math.floor(seconds % 60);
return mins + ":" + (secs < 10 ? "0" : "") + secs;
}
</script>
</body>
</html>
This creates a custom progress bar that updates based on the video's current time and total duration.
Browser Compatibility
The duration property is supported in all modern browsers that support the HTML5 video element. However, the exact value may vary slightly between browsers due to different video decoding implementations.
Conclusion
The HTML DOM Video duration property provides essential timing information for video elements, returning the length in seconds for recorded content or Infinity for live streams. It becomes available after the video metadata loads and is crucial for building custom video controls and progress indicators.
268 Views
