HTMLMediaElement: durationchange event - Web APIs | MDN
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("durationchange", (event) => { })
ondurationchange = (event) => { }
Event type
A generic Event.
Examples
These examples add an event listener for the HTMLMediaElement's durationchange event, then post a message when that event handler has reacted to the event firing.
Using addEventListener():
js
const video = document.querySelector("video");
video.addEventListener("durationchange", (event) => {
console.log("Not sure why, but the duration of the video has changed.");
});
Using the ondurationchange event handler property:
js
const video = document.querySelector("video");
video.ondurationchange = (event) => {
console.log("Not sure why, but the duration of the video has changed.");
};
Specifications
| Specification |
|---|
| HTML # event-media-durationchange |
| HTML # handler-ondurationchange |
Browser compatibility
- The HTMLMediaElement
playingevent - The HTMLMediaElement
waitingevent - The HTMLMediaElement
seekingevent - The HTMLMediaElement
seekedevent - The HTMLMediaElement
endedevent - The HTMLMediaElement
loadedmetadataevent - The HTMLMediaElement
loadeddataevent - The HTMLMediaElement
canplayevent - The HTMLMediaElement
canplaythroughevent - The HTMLMediaElement
timeupdateevent - The HTMLMediaElement
playevent - The HTMLMediaElement
pauseevent - The HTMLMediaElement
ratechangeevent - The HTMLMediaElement
volumechangeevent - The HTMLMediaElement
suspendevent - The HTMLMediaElement
emptiedevent - The HTMLMediaElement
stalledevent