HTML DOM ondurationchange Event
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" >w3wiki</ 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" > w3wiki </ 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" >w3wiki</ 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