HTML ondurationchange Attribute

Last Updated : 18 Aug, 2020

The HTML ondurationchange Attribute is an event attribute that 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.

Syntax:

<element ondurationchange="myScript">

Attribute Value: This attribute contains a single value script that works when ondurationchange event attribute call. This attribute is supported by <audio> and <video> tags.

Below examples illustrate the ondurationchange attribute in HTML:

Example 1:

HTML

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        HTML ondurationchange Attribute 
    </title>  
</head>  
  
<body>  
    <center>  
        <h1 style="color:green">GeeksforGeeks</h1>  
        <h2>HTML ondurationchange Attribute</h2>  
        <audio controls ondurationchange="GFGfun()">  
        <source src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3"
        type="audio/mpeg"> 
        </audio>  
        <script>  
            function GFGfun() {  
                alert("The audio duration has changed");  
            }  
        </script>  
    </center>  
</body>  
  
</html>  

Output

After:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML ondurationchange Attribute 
        </title> 
    </head> 
  
    <body> 
        <center> 
            <h1 style="color: green;">GeeksforGeeks</h1> 
            <h2>HTML ondurationchange Attribute</h2> 
  
            <video width="400" height="200" controls ondurationchange="GFGfun()"> 
                <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" 
                        type="video/mp4" /> 
                <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                        type="video/ogg" /> 
            </video> 
        </center> 
  
        <script> 
            function GFGfun() { 
                alert("The video duration has changed"); 
            } 
        </script> 
    </body> 
</html>