durationchange

16 March, 2023

Contributors

Milsaware

@milsaware

About

The durationchange event is an important event that is fired when the duration property of an audio or video element changes. This event is often used in conjunction with other events, such as loadedmetadata, to handle changes to the length of media files.

The duration property of an audio or video element specifies the length of the media in seconds. When the media file is initially loaded, the duration property may not be immediately available because the browser needs to fetch the metadata of the media file, such as its length and encoding format. Once the metadata is loaded, the duration property is updated and the loadedmetadata event is fired.

However, the duration of a media file can change during playback due to various reasons such as the user seeking to a different part of the media file, or changes in the media file itself. In such cases, the durationchange event is fired to indicate that the duration property has been updated. This event is particularly useful for media players that need to update their UI to reflect the current position and duration of the media file.

Event listener

Here's an example of how to add an event listener for the durationchange event on a video element:

HTML

<video id="my-video" src="my-video.mp4"></video>

JavaScript

const video = document.getElementById('my-video');

video.addEventListener('durationchange', () => {
    console.log(`The duration of the video is now ${video.duration} seconds.`);
});

Here, we're adding an event listener for the durationchange event to the video element. The listener is a function that logs the new duration of the video to the console when the durationchange event is fired.

Note that the duration property of a media element is not available until the media metadata has been loaded, which can sometimes take a few moments. Therefore, it's a good idea to listen for the loadedmetadata event before accessing the duration property for example:

video.addEventListener('loadedmetadata', () => {
    console.log('Media metadata loaded.');
    console.log(`The duration of the video is ${video.duration} seconds.`);
});

Here, we're adding an event listener for the loadedmetadata event to the video element. The listener is a function that logs a message to the console when the metadata has been loaded and then logs the duration of the video.

By waiting for the loadedmetadata event before accessing the duration property, we can be sure that the metadata has been loaded and that the duration property is available.

Property

Here's an example of using the ondurationchange property with a function assigned to it:

// JavaScript code
const myVideo = document.getElementById('my-video');

myVideo.ondurationchange = function() {
    console.log('Video duration changed:', myVideo.duration);
};

Here, we first get a reference to the <video> element with the ID "my-video" using document.getElementById(). Then we assign a function to the ondurationchange property of the myVideo element.

The assigned function is called whenever the duration property of the myVideo element changes, such as when the media file is loaded or when the user seeks to a different part of the video. We simply log the new value of the duration property to the console.

Inline

You can also use the durationchange event inline using the ondurationchange attribute in HTML. For example:

HTML

<video id="my-video" src="my-video.mp4" ondurationchange="handleDurationChange()"></video>

JavaScript

function handleDurationChange() {
    const video = document.getElementById('my-video');
    console.log(`The duration of the video is now ${video.duration} seconds.`);
}

Here, we're using the ondurationchange attribute to specify the name of the function to be called when the durationchange event is fired. The handleDurationChange function retrieves the video element and logs the new duration of the video to the console.

Note that using inline event handlers can make your HTML code harder to read and maintain. It's generally recommended to use addEventListener to attach event listeners instead.

Programmatic trigger

There is no durationchange() method and it cannot be directly simulated. The durationchange event is a built-in event in the browser that is fired automatically by the media element when its duration changes.

However, you can modify the duration property of a media element to trigger the durationchange event. When the duration property is changed, the media element will fire the durationchange event automatically.

Here's an example of how you can change the duration property of a video element:

const myVideo = document.getElementById('my-video');
myVideo.duration = 60; // set duration to 60 seconds

Here, we're setting the duration property of the myVideo element to 60 seconds. This will trigger the durationchange event on the myVideo element, causing any event listeners that have been added for this event to be executed.

It's important to note that you should be careful when changing the duration property of a media element, as it can cause unexpected behaviour if not done correctly. In general, it's best to let the media element set the duration property itself based on the metadata of the media file.

javascript

video

videoplayer