The HTML DOM ondurationchange Event occurs when the audio/video duration is changed. The duration of the audio/video is changed from “NaN” to the actual duration of the audio/video when it loads.
The following events occur During the loading process of an audio/video:
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
Supported Tags:
Syntax:
In HTML:
<element ondurationchange="myScript">
In JavaScript:
object.ondurationchange = function(){myScript};In JavaScript, using the addEventListener() method:
object.addEventListener("durationchange", myScript);Example 1: Using HTML
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>
HTML DOM ondurationchange Event
</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4"
type="video/mp4">
</video>
<script>
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
|
Output:
Example 2: Using JavaScript
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML DOM ondurationchange Event
</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4"
type="video/mp4">
</video>
<script>
document.getElementById("durVideo")
.ondurationchange = function () {
GFGfun()
};
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
|
Output:
Example 3: using the addEventListener() method:
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>
HTML DOM ondurationchange Event
</h2>
<video controls ondurationchange="GFGfun()">
<source src="mov_bbb.mp4"
type="video/mp4">
</video>
<script>
document.getElementById(
"durVideo")
.addEventListener("durationchange", GFGfun);
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by HTML DOM ondurationchange Event are listed below:
- Google Chrome 3
- Edge 12
- Internet Explorer 9
- Firefox 3.5
- Apple Safari 3.1
- Opera 10.5