Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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
        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=
                        type="video/mp4" />
                <source src=
                        type="video/ogg" />
            </video>
        </center>
  
        <script>
            function GFGfun() {
                alert("The video duration has changed");
            }
        </script>
    </body>
</html>

Output 

After: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :