HTML onloadeddata Event Attribute

Description

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">
</video>

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
  video.load();

  // 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.

Syntax

<element onloadeddata="script">

Values

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

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<audio id="myAudio" controls onloadeddata="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<p>Play audio file:</p>



<script>

function myFunction() {

    alert("EXAMPLE: Data uploaded");

}

</script> 



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



</body>

</html>