onloadeddata

The onloadeddata event is triggered when a media frame is loaded, but it doesn't ensure that enough data is available to start playback. The event simply indicates that some data has been loaded.

onloadeddata event

The onloadeddata event attribute executes a script when media data is loaded. It's frequently used with <audio> and <video> elements to manage buffering or initiate playback.

Syntax

In HTML

index.html

<element onloadeddata ="myScript">

In JS

script.js

object.onloadeddata  = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("loadeddata ", myScript);

Example

::event-onloadeddata ::

index.html

<!DOCTYPE html> 
<html> 
<body> 
<h1>HTML DOM Events</h1>
<h2>The onloadeddata Event</h2>

<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://institute.qarpeo.com" target="_blank">Tree</a>.</p>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Browser has loaded first frame.";
}
</script>

</body> 
</html>

Values

<script>
- Defines the <script> to run when the event is activated.

The onloadeddata event is fired when media data is loaded, indicating that some data is available but not necessarily enough for playback. It's commonly used with <audio> and <video> elements to handle buffering or start playback. This event helps manage media readiness for smoother user experience.

onended

The onended event is triggered when an audio or video reaches its end. It is commonly used to display messages like "thanks for listening" or trigger other actions once playback finishes.

onloadedmetadata

The loadedmetadata event is triggered when the metadata for the given audio or video has been successfully loaded.