HTML ondurationchange Attribute: The HTML ondurationchange attribute is defined as the duration change an event occurs when the duration data of a specified content(audio or video) is changed. During the loading process of an audio/video, the following events occur, in this order:
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
HTML ondurationchange Attribute
This attribute can be applied to the <audio> and <video> elements.
Syntax: <audio ondurationchange=”script”>
Browser Support
This attribute is supported by the following browsers:
- Chrome
- Firefox
- Opera
- Safari
- Internet Explorer-9.0
Example: for <audio> element
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls ondurationchange="myFunction(this)">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
function myFunction(x) {
alert("The duration of this audioclip is : " + x.duration + " seconds");
}
</script>
<p>This example demonstrates how to use the "ondurationchange" attribute on an AUDIO element.</p>
</body>
</html>
Example: for <video> element
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls ondurationchange="myFunction(this)">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
<script>
function myFunction(x) {
alert("The duration of this video is : " + x.duration + " seconds");
}
</script>
<p>This example demonstrates how to use the ondurationchange attribute </p>
</p>
</body>
</html>