HTML onloadeddata Event Attribute


The HTML onloadeddata event attribute is fired when the first frame of an audio or video element has finished loading. This does not guarantee that enough data is available to begin playing the media, but it does indicate that the browser has at least enough data to display the first frame.

The onloadeddata event is typically used to start preloading the next frame of the media, or to perform other tasks that require the first frame to be loaded. For example, you could use the onloadeddata event to start displaying a loading animation, or to disable a play button until the first frame is loaded.

To use the onloadeddata event attribute, simply add it to an audio or video element and specify the name of a JavaScript function to be called when the event is fired. For example:

<video onloadeddata="myFunction()">
  <source src="my_video.mp4" type="video/mp4">

The myFunction() function will be called when the first frame of the video has finished loading.

Here is an example of a JavaScript function that you could use to handle the onloadeddata event:

function myFunction() {
  // Start preloading the next frame of the video

  // Enable the play button
  playButton.disabled = false;

The onloadeddata event is a useful event for controlling the loading and playback of audio and video elements. By using the onloadeddata event, you can ensure that your media elements are ready to play before displaying them to the user.


<element onloadeddata="script">


  • scriptThe name of the script to use when the event has been triggered.



<audio id="myAudio" controls onloadeddata="myFunction()">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.

<p>Play audio file:</p>

function myFunction() {
alert("EXAMPLE: Data uploaded");

<p>This example shows how to use the onloadeddata attribute for an AUDIO element.</p>


Browser Support

The following table will show you the current browser support for the HTML onloadeddata Event Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 14th October 2023