JavaScript Document loadedmetadata Event: The Complete Guide

JavaScript provides a variety of events to enhance the interactivity and functionality of web pages. One such essential event is the loadedmetadata event. This guide will explain everything you need to know about the loadedmetadata event. We’ll cover what it is, why it’s useful, where to use it, how to implement it, and when it comes into play. Let’s dive in!

What is the loadedmetadata Event?

The loadedmetadata event in JavaScript is fired when the metadata for a media element (like <audio> or <video>) has been loaded. Metadata includes information such as duration, dimensions (for video), and text tracks.

Why Use the loadedmetadata Event?

Using the loadedmetadata event is beneficial because it allows you to access and use metadata information as soon as it is available. This can be useful for setting up media controls, displaying media information, and ensuring that media elements are ready for interaction.

Where Can You Use the loadedmetadata Event?

You can use the loadedmetadata event on media elements like <audio> and <video>. This event is particularly useful in web applications that include media playback and need to handle metadata as soon as it is available.

How to Use the loadedmetadata Event

Let’s dive into some examples to see how the loadedmetadata event works in different scenarios.

Basic Example

Here’s a simple example to show how the loadedmetadata event works with a video element.

HTML
<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="metadata">Metadata: Not loaded yet πŸ“Š</p>

<script>
  const video = document.getElementById("video");
  const metadataDisplay = document.getElementById("metadata");

  video.addEventListener("loadedmetadata", () => {
    const duration = video.duration;
    const width = video.videoWidth;
    const height = video.videoHeight;
    metadataDisplay.textContent = `Duration: ${duration}s, Dimensions: ${width}x${height}px πŸ“Š`;
    console.log(`Metadata loaded: Duration - ${duration}s, Dimensions - ${width}x${height}px`);
  });
</script>

In this example, a message is displayed and logged to the console when the metadata of the video is loaded.

Example with Audio Element

Let’s see how the loadedmetadata event can be used with an audio element.

HTML
<audio id="audio" controls>
  <source src="sample-audio.mp3" type="audio/mp3" />
  Your browser does not support the audio tag.
</audio>
<p id="metadata">Metadata: Not loaded yet 🎡</p>

<script>
  const audio = document.getElementById("audio");
  const metadataDisplay = document.getElementById("metadata");

  audio.addEventListener("loadedmetadata", () => {
    const duration = audio.duration;
    metadataDisplay.textContent = `Duration: ${duration}s 🎡`;
    console.log(`Metadata loaded: Duration - ${duration}s`);
  });
</script>

In this example, a message is displayed and logged to the console when the metadata of the audio is loaded.

Example with Custom Controls

Let’s see how the loadedmetadata event can be used to set up custom media controls.

HTML
<style>
  .controls {
    margin-top: 10px;
  }
</style>
<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<div class="controls">
  <button id="play">Play ▢️</button>
  <button id="pause">Pause ⏸️</button>
  <button id="restart">Restart πŸ”„</button>
</div>
<p id="metadata">Metadata: Not loaded yet πŸ“Š</p>

<script>
  const video = document.getElementById("video");
  const metadataDisplay = document.getElementById("metadata");
  const playButton = document.getElementById("play");
  const pauseButton = document.getElementById("pause");
  const restartButton = document.getElementById("restart");

  video.addEventListener("loadedmetadata", () => {
    const duration = video.duration;
    const width = video.videoWidth;
    const height = video.videoHeight;
    metadataDisplay.textContent = `Duration: ${duration}s, Dimensions: ${width}x${height}px πŸ“Š`;
    console.log(`Metadata loaded: Duration - ${duration}s, Dimensions - ${width}x${height}px`);
  });

  playButton.addEventListener("click", () => {
    video.play();
  });

  pauseButton.addEventListener("click", () => {
    video.pause();
  });

  restartButton.addEventListener("click", () => {
    video.currentTime = 0;
    video.play();
  });
</script>

In this example, custom buttons are used to control the video, and the metadata is displayed when loaded.

When to Use the loadedmetadata Event

The loadedmetadata event is particularly useful in scenarios where:

  • You need to access metadata information as soon as it is available.
  • You want to set up custom media controls based on metadata.
  • You need to display media information to users.
  • You want to ensure that media elements are ready for interaction.

Comparing loadedmetadata with Other Media Events

To understand the loadedmetadata event better, let’s compare it with other common media events like canplay, canplaythrough, and loadeddata.

EventDescriptionExample Usage
loadedmetadataFired when the metadata for a media element is loadedDisplay metadata information, set up controls
canplayFired when enough data is available to play, but not necessarily the entire resourceHide loading indicators, start playback
canplaythroughFired when the browser estimates it can play the media to the end without stopping for more dataHide loading indicators, indicate ready to play
loadeddataFired when the first frame of the media has finished loadingInitialize playback, update UI

Code Examples of Different Events

Here’s how you can use some of these events in your code:

HTML
<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="status">Monitoring media events... ⏳</p>

<script>
  const video = document.getElementById("video");
  const status = document.getElementById("status");

  video.addEventListener("loadedmetadata", () => {
    status.textContent = "Metadata loaded πŸ“Š";
  });

  video.addEventListener("canplay", () => {
    status.textContent = "Can play! πŸŽ‰";
  });

  video.addEventListener("canplaythrough", () => {
    status.textContent = "Can play through! πŸš€";
  });

  video.addEventListener("loadeddata", () => {
    status.textContent = "Data loaded ⏯️";
  });
</script>

Conclusion

The loadedmetadata event in JavaScript is a powerful tool for handling metadata of media elements. By understanding and using this event, you can create more interactive and user-friendly web applications. Whether you are displaying media information, setting up custom controls, or ensuring that media elements are ready for interaction, the loadedmetadata event helps you ensure that your media elements work smoothly and effectively.

Summary

  • What: The loadedmetadata event fires when the metadata for a media element is loaded.
  • Why: It helps in accessing metadata information, updating the UI, and providing feedback to users.
  • Where: Use it on media elements like <audio> and <video> to detect when their metadata is loaded.
  • How: By adding an event listener for loadedmetadata and handling the necessary actions.
  • When: Use it whenever you need to manage actions triggered by the loading of metadata to improve user experience.

Feel free to use the examples provided and modify

them to suit your needs. Happy coding! πŸŽ‰

What are JavaScript Browser Events?

JavaScript browser events are key to creating interactive web applications. These events are actions or occurrences detected by the browser, such as user interactions, document changes, or window modifications. By responding to events like clicks, key presses, and form submissions, developers can enhance user experience and functionality.

This comprehensive list of JavaScript browser events is a valuable reference for developers. It covers a wide range of events, from mouse and keyboard actions to document and window changes. Understanding and handling these events is essential for building responsive and engaging web applications, ensuring a seamless and intuitive user experience.

See List of all JavaScript Browser Events – Cheat Sheet

  • Document events:
    • ended
    • error
    • loadeddata
    • loadedmetadata
    • loadstart
    • pause
    • play
    • playing
    • progress
    • ratechange
    • seeked
    • seeking
    • stalled
    • suspend
    • timeupdate
    • volumechange
    • waiting
    • emptied
    • durationchange
    • cuechange
    • change
    • canplaythrough
    • canplay
    • abort
    • DOMContentLoaded
  • Window events:
    • afterprint
    • beforeprint
    • beforeunload
    • error
    • hashchange
    • load
    • message
    • offline
    • online
    • pagehide
    • pageshow
    • popstate
    • resize
    • scroll
    • storage
    • unload
  • Form events:
    • submit
    • select
    • reset
    • invalid
    • input
    • focus
    • change
    • blur
  • Keyboard events:
    • keyup
    • keypress
    • keydown
  • Mouse events:
    • wheel
    • mouseup
    • mouseover
    • mouseout
    • mousemove
    • mouseleave
    • mouseenter
    • mousedown
    • dblclick
    • contextmenu
    • click

Leave a Reply