HTML ondurationchange Event Attribute - Media Events Attribute

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.

Example of HTML ondurationchange Event Attribute

It will alert that the duration of the video has changed. It will happen the audio duration has changed.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert("The audio duration has changed");
}
</script> 

<video controls ondurationchange="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="video/mp4">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

Definition and Usage of HTML ondurationchange Event Attribute

The durationchange event occurs when the duration data of the specified audio/video is changed.

Note: When an audio/video is loaded, the duration will change from "NaN" to the actual duration of the audio/video.

During the loading process of an audio/video, the following events occur, in this order:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML ondurationchange Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Syntax of HTML ondurationchange Event Attribute

<element ondurationchange="script">

Attribute Values of HTML ondurationchange Event Attribute

Value	Description
script	The script to be run on duration change

Technical Details of HTML ondurationchange Event Attribute

Supported HTML tags:	<audio> and <video>
Supported JavaScript objects:	Audio, Video

How to alert that the duration of the video has changed

The audio duration has changed in this code.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert("The audio duration has changed");
}
</script> 

<video controls ondurationchange="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="video/mp4">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

How to alert that the duration of the audio has changed

The audio duration has changed.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert("The audio duration has changed");
}
</script> 

<audio controls ondurationchange="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/ogg">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


</body> 
</html>

Output should be:

html event attributes

List of Media Events	Media Events Attribute
HTML onabort Event Attrribute	Media Events Attribute
HTML oncanplay Event Attribute	Media Events Attribute
HTML oncanplaythrough Event Attribute	Media Events Attribute
HTML ondurationchange Event Attribute	Media Events Attribute
HTML onended Event Attribute	Media Events Attribute

Single Articles

Example of HTML ondurationchange Event Attribute	Media Events Attribute
Definition and Usage of HTML ondurationchange Event Attribute	Media Events Attribute
Browser Support of HTML ondurationchange Event Attribute	Media Events Attribute
Syntax of HTML ondurationchange Event Attribute	Media Events Attribute
Attribute Values of HTML ondurationchange Event Attribute	Media Events Attribute
Technical Details of HTML ondurationchange Event Attribute	Media Events Attribute
How to alert that the duration of the video has changed	Media Events Attribute
How to alert that the duration of the audio has changed	Media Events Attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	Media Events Attribute
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/ev_ondurationchange.asp