Horje
HTML onloadeddata Event 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:

Example of HTML onloadeddata Event Attribute

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:

  1. loadstart
  2. durationchange
  3. loadedmetadata
  4. loadeddata
  5. progress
  6. canplay
  7. canplaythrough

Browser Support of HTML onloadeddata Event Attribute

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

Browser Support of HTML onloadeddata Event Attribute

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 <video>)

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:

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




html event attributes

Related Articles
List of Media Events HTML Media Events Attribute
HTML onabort Event Attrribute HTML Media Events Attribute
HTML oncanplay Event Attribute HTML Media Events Attribute
HTML oncanplaythrough Event Attribute HTML Media Events Attribute
HTML ondurationchange Event Attribute HTML Media Events Attribute
HTML onended Event Attribute HTML Media Events Attribute
HTML onerror Event Attribute HTML Media Events Attribute
HTML onloadeddata Event Attribute HTML Media Events Attribute
HTML onloadedmetadata Event Attribute HTML Media Events Attribute
HTML onloadstart Event Attribute HTML Media Events Attribute

Single Articles
Example of HTML onloadeddata Event Attribute HTML Media Events Attribute
Definition and Usage of HTML onloadeddata Event Attribute HTML Media Events Attribute
Browser Support of HTML onloadeddata Event Attribute HTML Media Events Attribute
Syntax of HTML onloadeddata Event Attribute HTML Media Events Attribute
Attribute Values of HTML onloadeddata Event Attribute HTML Media Events Attribute
Technical Details of HTML onloadeddata Event Attribute HTML Media Events Attribute
How to alert that data for the current frame is available (for <video>) HTML Media Events Attribute
How to alert that data for the current frame is available (for <audio>) HTML Media Events Attribute

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


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