HTML onloadeddata Event Attribute - HTML Media Events Attribute

The onloadeddata event attribute in HTML is a media event that occurs when the current frame of an audio or video element has loaded enough data to be played, but not necessarily enough data to play the next frame. It signifies that the media element has received some playable data at the current playback position.

Example of HTML onloadeddata Event Attribute

It will alert that data for the current frame is available (for <video>).

index.html

Example: HTML

 <script>
function myFunction() {
  alert("Browser has loaded the current frame");
}
</script>

<video onloadeddata="myFunction()">

Output should be:

Definition and Usage of HTML onloadeddata Event Attribute

The loadeddata event occurs when data for the current frame is loaded, but not enough data to play next frame of the specified audio/video.

During the loading process of an audio/video, the following events occur, in this order:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML onloadeddata Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Syntax of HTML onloadeddata Event Attribute

<element onloadeddata="script">

Attribute Values of HTML onloadeddata Event Attribute

Value	Description
script	The script to be run when data is loaded

Technical Details of HTML onloadeddata Event Attribute

Supported HTML tags:	<audio> and <video>

How to alert that data for the current frame is available (for <video>)

Play Video.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Browser has loaded the current frame');
}
</script>

<video controls onloadeddata="myFunction()">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

How to alert that data for the current frame is available (for <audio>)

Play Audio.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Browser has loaded the current frame');
}
</script>

<audio controls onloadeddata="myFunction()">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/ogg">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Media Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference