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
Execute a script when the length of the media changes in HTML?
The ondurationchange attribute in HTML triggers when the duration of an audio or video element changes. This event occurs when the browser has loaded enough of the media file to determine its total length, or when the duration metadata becomes available.
Syntax
Following is the syntax for the ondurationchange attribute −
<audio ondurationchange="myFunction()"></audio> <video ondurationchange="myFunction()"></video>
The attribute can also be added using JavaScript −
audioElement.ondurationchange = function() { /* code */ };
videoElement.addEventListener("durationchange", myFunction);
When Duration Changes Occur
The ondurationchange event is fired in the following scenarios −
When the media metadata is first loaded and the duration becomes known
When switching between different media sources with different durations
When the actual duration differs from the initially reported duration
For live streams, when the duration information is updated
Example − Video Duration Change
Following example demonstrates the ondurationchange attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Duration Change Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video Duration Change Example</h2>
<video width="400" height="300" controls ondurationchange="displayDuration(this)">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="duration-info">Duration will be displayed when video loads...</p>
<script>
function displayDuration(video) {
var minutes = Math.floor(video.duration / 60);
var seconds = Math.floor(video.duration % 60);
document.getElementById("duration-info").innerHTML =
"Video Duration: " + minutes + " minutes " + seconds + " seconds (" + video.duration.toFixed(2) + "s total)";
}
</script>
</body>
</html>
When the video metadata loads, the duration information is displayed in a formatted manner showing minutes, seconds, and total duration.
Example − Audio Duration Change
Following example shows the ondurationchange event with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio Duration Change Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Audio Duration Change Example</h2>
<audio controls ondurationchange="showAudioDuration(this)">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audio-details" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
<p>Waiting for audio to load...</p>
</div>
<script>
function showAudioDuration(audio) {
var info = document.getElementById("audio-details");
if (isFinite(audio.duration)) {
info.innerHTML = "<p><strong>Audio loaded successfully!</strong></p>" +
"<p>Duration: " + audio.duration.toFixed(2) + " seconds</p>" +
"<p>Ready to play</p>";
} else {
info.innerHTML = "<p>Duration: Unknown or infinite (live stream)</p>";
}
}
</script>
</body>
</html>
This example checks if the duration is finite to handle cases where the media might be a live stream with infinite duration.
Using addEventListener Method
You can also attach the duration change event using JavaScript's addEventListener method −
<!DOCTYPE html>
<html>
<head>
<title>Duration Change with addEventListener</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Using addEventListener for Duration Change</h2>
<video id="myVideo" width="400" height="300" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="event-log"></p>
<script>
var video = document.getElementById("myVideo");
var log = document.getElementById("event-log");
video.addEventListener("durationchange", function() {
log.innerHTML = "Duration change event fired! Duration: " +
this.duration.toFixed(2) + " seconds";
});
video.addEventListener("loadedmetadata", function() {
log.innerHTML += "<br>Metadata loaded. Video is ready to play.";
});
</script>
</body>
</html>
This approach provides more flexibility and follows modern JavaScript best practices for event handling.
Practical Applications
The ondurationchange event is commonly used for −
Progress bars − Setting the maximum value of a custom progress bar based on media duration
Time displays − Showing total duration in custom media players
Playlist management − Calculating total playlist duration
Analytics − Tracking media duration for usage statistics
Browser Compatibility
The ondurationchange attribute is supported in all modern browsers that support HTML5 audio and video elements, including Chrome, Firefox, Safari, Edge, and Opera. It works consistently across desktop and mobile platforms.
Conclusion
The ondurationchange attribute provides a reliable way to execute JavaScript when media duration information becomes available. It is essential for building custom media players and handling dynamic content where the duration might change during playback.
287 Views
