onloadedmetadata

onloadedmetadata event

The onloadedmetadata event attribute activates a script once the media's metadata (such as duration or dimensions) has been loaded. It is often used with <audio> and <video> elements.

Syntax

addEventListener("loadedmetadata", (event) => {});
onloadedmetadata = (event) => {};

Event Category

A general-purpose event.

Examples

The following examples attach an event listener to an HTMLMediaElement for the loadedmetadata event. When the event triggers, a message is displayed indicating that the event has been processed.

• Utilizing the addEventListener() method:

const video = document.querySelector("video");

video.addEventListener("loadedmetadata", (event) => {
  console.log(
    "The duration and dimensions of the media and tracks are now known.",
  );
});

• Utilizing the onloadedmetadata event handler property:

const video = document.querySelector("video");

video.onloadedmetadata = (event) => {
  console.log(
    "The duration and dimensions of the media and tracks are now known.",
  );
};

Values

• <script>
  • Specifies the <script> to execute when the event occurs.

Conclusion

The onloadedmetadata event is essential for responding to when media metadata, like duration or dimensions, is fully loaded. It's commonly used with <audio> and <video> elements to trigger actions after metadata is available. This event helps ensure scripts run only when the media is ready for interaction.