loadeddata

About

The loadeddata event is triggered when the media element's data has finished loading. This event is applicable to media elements like <video> and <audio>, and it fires once the metadata for the media has been loaded and the first frame of the media has been downloaded and is ready to play.

The loadeddata event is similar to the loadedmetadata and canplaythrough events, but it occurs at a different point in the media loading process. While the loadedmetadata event is triggered when the metadata for the media has been loaded, and the canplaythrough event is triggered when the media can be played through to the end without buffering, the loadeddata event is triggered when the first frame of the media has been downloaded and is ready to play. This makes it a useful event to listen for if you want to perform some action after the media has loaded but before it starts playing.

Event listener

Here's an example of how to use the addEventListener() method to attach a loadeddata event handler to a <video> element:

HTML

JavaScript

Here, we first select the <video> element using document.getElementById() and store it in the video variable. We then attach a loadeddata event handler to the element using the addEventListener() method. When the loadeddata event is triggered (which will happen once the first frame of the video has been downloaded and is ready to play), the anonymous function we passed as the second argument to addEventListener() will be executed. In this case, we're just logging a message to the console to indicate that the video data has finished loading.

Note that the loadeddata event can be useful if you want to perform some action after the media has loaded but before it starts playing. If you want to wait until the media can be played through to the end without buffering, you can use the canplaythrough event instead.

Property

Using the same example as above, you could use the onloadeddata property to attach the event:

Here, we first select the <video> element using document.getElementById() and store it in the video variable. We then attach a loadeddata event handler to the element using the onloadeddata property.

Inline

Here's an example of how to use the onloadeddata property as an inline event handler for a <video> element:

HTML

JavaScript

Here, we've added an onloadeddata attribute to the <video> element and assigned it the value "handleLoadedData()". This tells the browser to execute the handleLoadedData() function when the loadeddata event is triggered (which will happen once the first frame of the video has been downloaded and is ready to play).

We then define the handleLoadedData() function in a <script> element. When the function is called, it will log a message to the console to indicate that the video data has finished loading.

Note that using inline event handlers like this can make your HTML code harder to read and maintain, especially if you have a lot of JavaScript code. It's generally better to use addEventListener() or the onloadeddata property to attach event handlers in your JavaScript code instead.

Programmatic trigger

The loadeddata event is a browser-generated event that is triggered automatically when the browser has loaded the first frame of a media element (such as a video or audio element). It doesn't have a corresponding loadeddata() method that you can call programmatically.

To trigger the loadeddata event programmatically, you can use the dispatchEvent() method. Here's an example of how to use dispatchEvent() to trigger the loadeddata event on a <video> element:

Here, we've used setTimeout() to simulate a delay of 2 seconds before triggering the loadeddata event on the <video> element using dispatchEvent(). We've also attached a loadeddata event listener to the element using addEventListener(), which will log a message to the console once the event is triggered.

Note that manually triggering the loadeddata event like this is not something you would normally need to do in a real-world application, as the event is triggered automatically by the browser when the media element has loaded the first frame. The example is just meant to demonstrate how you can use dispatchEvent() to trigger an event programmatically.