loadedmetadata

About

The loadedmetadata event is a browser-generated event that is triggered when the browser has loaded the metadata for a media element (such as a video or audio element). Metadata includes information such as the media duration, dimensions, codecs, and bitrates.

When a media element is loaded, the browser will try to download the metadata first, before downloading the actual media content. The loadedmetadata event is fired when the metadata has been loaded, but the media content itself may not have finished loading. This means that you can use this event to get information about the media, such as its duration, before the media content is fully loaded and ready to play.

Event listener

You can use the addEventListener() method to listen for the loadedmetadata event on a media element, and perform some action when the event is fired. For example, you could update the UI of your media player to display the duration of the media once the metadata has been loaded. Here's an example of how to use addEventListener() to listen for the loadedmetadata event on a <video> element:

HTML

JavaScript

Here, we've used addEventListener() to attach a loadedmetadata event listener to the <video> element. The event listener function logs the duration of the video (in seconds) to the console once the metadata has been loaded.

Note that the loadedmetadata event may not be supported on some older browsers, so you may want to test your code on different browsers to ensure that it works as expected.

Property

Here's an example of how to use the onloadedmetadata property to attach a loadedmetadata event listener to a <video> element:

Here, we've used the onloadedmetadata property to attach a loadedmetadata event listener to the <video> element. The event listener function logs the duration of the video (in seconds) to the console once the metadata has been loaded.

Inline

Here's an inline example of how to use the onloadedmetadata property to attach a loadedmetadata event listener to a <video> element:

HTML

JavaScript

Here, we've used the onloadedmetadata property as an inline event handler to attach a loadedmetadata event listener to the <video> element. The handleMetadataLoaded() function is called once the metadata for the video has been loaded, and it logs the duration of the video (in seconds) to the console.

Note that using inline event handlers is generally not recommended, as it can make your code harder to read and maintain. It's generally better to use addEventListener() to attach event listeners in JavaScript.

Programmatic trigger

There is no specific loadedmetadata() method that you can use to trigger the loadedmetadata event programmatically. You can only trigger the event using the dispatchEvent() method.

Here's an example of how to dispatch a loadedmetadata event on a media element programmatically:

Here, we've created a new loadedmetadata event using the Event constructor and dispatched it on the <video> element using the dispatchEvent() method. This will trigger any event listeners that have been attached to the loadedmetadata event on the video element.

As with any type of programmatic event triggering, it's generally not recommended to trigger the loadedmetadata event programmatically unless you have a very specific use case.

In most cases, the loadedmetadata event is fired automatically by the browser once the metadata for the media element has been loaded. If you need to perform some action once the metadata has been loaded, it's usually best to attach an event listener to the media element using addEventListener(), rather than triggering the event manually.

However, there may be some rare cases where you need to trigger the loadedmetadata event programmatically. Just be aware that doing so can cause unexpected behaviour, as the event may be triggered multiple times or out of order, which can affect the timing and behaviour of any event listeners that are attached to the loadedmetadata event. So, it's important to use this approach with caution and only if it's absolutely necessary.