Skip to content
Related Articles

Related Articles

HTML | DOM ondurationchange Event

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Aug, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!