HTML onloadedmetadata Attribute

Posted in HTML Tutorial

Updated on Nov 19, 2024

By Mari Selvan

👁️ 43 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The onloadedmetadata attribute is an event handler in HTML that allows developers to execute JavaScript code when the metadata of a media element (like a video) has been loaded.

This event occurs once the initial metadata, such as duration and dimensions, has been retrieved, providing a trigger point for custom actions.

🎯 Purpose of onloadedmetadata

The primary purpose of the onloadedmetadata attribute is to enable developers to perform actions or initiate scripts once the metadata of a media element is ready.

This can be useful for dynamically adapting the user interface or triggering other events based on the properties of the loaded media.

💎 Values

The onloadedmetadata attribute is an event handler, and as such, it doesn't have multiple values like some other attributes.

It is assigned a JavaScript function that will be executed when the loadedmetadata event occurs.

📄 Example

Let's look at a simple example of how to use the onloadedmetadata attribute in an HTML video element:

onloadedmetadata.html

Copied

<video controls onloadedmetadata="handleMetadataLoaded()">
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  function handleMetadataLoaded() {
    console.log("Metadata loaded! Video duration:", this.duration);
    // Add your custom actions here
  }
</script>

🧠 How it Works

In this example, the onloadedmetadata attribute is set to call the handleMetadataLoaded JavaScript function when the metadata of the video is loaded.

The function logs the video duration to the console, and you can customize it to perform any additional actions.

🔄 Dynamic Values with JavaScript

Similar to other event attributes, you can dynamically set the onloadedmetadata attribute using JavaScript.

This allows for more flexibility, especially when the function to be executed depends on certain conditions or user interactions:

onloadedmetadata.html

Copied

<script>
  // Dynamically set onloadedmetadata for a video element
  document.getElementById("dynamicVideo").onloadedmetadata = function() {
    console.log("Dynamic metadata loaded!");
    // Add your dynamic actions here
  };
</script>

🧠 How it Works

In this script, the onloadedmetadata attribute is dynamically set for a video element with the id dynamicVideo, and it logs a message to the console when the metadata is loaded.

🏆 Best Practices

Use the onloadedmetadata attribute when you need to perform actions or set up functionality based on the loaded metadata of a media element.
Be cautious about performance implications, especially when handling large media files. Executing complex scripts on the loadedmetadata event may affect the responsiveness of your page.
Always test your implementation across different browsers to ensure consistent behavior.