HTML Audio & Video
HTML DOM Audio duration Property
The duration property returns the total length of the media, in seconds. It is read-only and is only known after the browser has loaded the media's metadata.
Definition and Usage
duration is a floating-point number of seconds. Before metadata has loaded it is NaN, and for live or unbounded streams it is Infinity, so any code that formats it must handle those cases.
The safe time to read a meaningful value is inside the loadedmetadata event handler, which fires once the browser knows the media's length and dimensions.
Syntax
mediaElement.duration| Value | Meaning |
|---|---|
| A number of seconds | The known total length once metadata has loaded |
| NaN | Metadata has not loaded yet, so the length is unknown |
| Infinity | A live or unbounded stream with no fixed length |
Example
This runnable page waits for loadedmetadata, then formats the duration as mm:ss into an output box, guarding against NaN and Infinity.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>duration Demo</title></head>
<body>
<h2>How long is this video?</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="showLength()">Show length</button></p>
<p id="output">Metadata not loaded yet.</p>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function format(total) {
if (!isFinite(total)) return "Live or unknown duration";
const mins = Math.floor(total / 60);
const secs = Math.floor(total % 60).toString().padStart(2, "0");
return mins + ":" + secs;
}
function showLength() {
out.textContent = isNaN(video.duration)
? "Not loaded yet."
: "Length: " + format(video.duration);
}
video.addEventListener("loadedmetadata", showLength);
</script>
</body>
</html>More Examples
Combining duration with currentTime gives the fraction played, which is exactly what a progress bar needs.
<!DOCTYPE html>
<html>
<body>
<video id="v" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<progress id="bar" value="0" max="100"></progress>
<script>
const v = document.getElementById("v");
const bar = document.getElementById("bar");
v.addEventListener("timeupdate", () => {
if (isFinite(v.duration)) {
bar.value = (v.currentTime / v.duration) * 100;
}
});
</script>
</body>
</html>Reading duration too early returns NaN. Always wait for loadedmetadata (or check isNaN) before using it in calculations.
Key Takeaways
- duration is the read-only total length in seconds.
- It is NaN before metadata loads and Infinity for live streams.
- Read it inside loadedmetadata for a reliable value.
- Guard with isFinite()/isNaN() before formatting or dividing.
- currentTime / duration gives the fraction played for a progress bar.