El Atributo ONLOADEDMETADATA

El atributo onloadedmetadata es un evento de JavaScript que se activa cuando los metadatos de un recurso multimedia (como <video> o <audio>) se han cargado. Estos metadatos incluyen propiedades como la duración, dimensiones del video, formatos disponibles y otras características técnicas. Es clave para inicializar componentes que dependen de esta información antes de la reproducción.

¿Qué hace onloadedmetadata?

• Disparador: Cuando los metadatos del recurso multimedia están disponibles.

• Datos disponibles:

  • duration: Duración total del contenido (en segundos).

  • videoWidth/videoHeight: Dimensiones del video.

  • buffered: Rangos de datos cargados.

• Uso típico:

  • Mostrar la duración del contenido al usuario.

  • Ajustar la interfaz según las dimensiones del video.

  • Preparar controles de reproducción personalizados.

¿Dónde se aplica?

Funciona en elementos multimedia:

• <video>
• <audio>

Sintaxis básica

Como atributo HTML (inline):

<video 
  src="video.mp4" 
  onloadedmetadata="console.log('Duración:', this.duration)"
  controls
></video>

Con JavaScript (recomendado):

const video = document.getElementById("miVideo");
video.addEventListener("loadedmetadata", () => {
  console.log("Duración del video:", video.duration);
});

Ejemplos prácticos

Ejemplo 1: Mostrar duración del video

<video id="video" src="pelicula.mp4" controls></video>
<p id="duracion">Duración: calculando...</p>

<script>
  document.getElementById("video").addEventListener("loadedmetadata", function() {
    const minutos = Math.floor(this.duration / 60);
    const segundos = Math.floor(this.duration % 60);
    document.getElementById("duracion").textContent = 
      `Duración: ${minutos}:${segundos.toString().padStart(2, '0')}`;
  });
</script>

Ejemplo 2: Ajustar reproductor al tamaño del video

<video id="video" src="video.mp4" controls></video>

<script>
  const video = document.getElementById("video");
  video.addEventListener("loadedmetadata", () => {
    video.style.width = `${video.videoWidth}px`;
    video.style.height = `${video.videoHeight}px`;
  });
</script>

Ejemplo 3: Validar disponibilidad de metadatos

<audio id="podcast" src="podcast.mp3"></audio>
<button id="btnPlay" disabled>Reproducir</button>

<script>
  const podcast = document.getElementById("podcast");
  const btnPlay = document.getElementById("btnPlay");

  podcast.addEventListener("loadedmetadata", () => {
    btnPlay.disabled = false;
    btnPlay.textContent = `Reproducir (${podcast.duration.toFixed(2)}s)`;
  });
</script>

Diferencias clave entre eventos de carga multimedia

Evento	Descripción	Momento de activación
onloadedmetadata	Metadatos disponibles (duración, dimensiones)	Al inicio de la carga
onloadeddata	Primer fotograma cargado	Después de los metadatos
oncanplay	Datos suficientes para iniciar reproducción	Después de loadeddata
onprogress	Datos se están cargando activamente	Durante la carga

Mejores prácticas

Usar preload="metadata":

Optimiza la carga inicial de metadatos sin descargar todo el archivo:

<video preload="metadata" src="video.mp4"></video>

Manejar errores:

Combínalo con onerror para casos donde los metadatos no se carguen:

video.addEventListener("error", () => {
  console.error("Error al cargar el video");
});

Evitar acceso prematuro a propiedades:

No accedas a duration o videoWidth antes de que se dispare loadedmetadata:

// ❌ Incorrecto (podría ser NaN/0)
console.log(video.duration);

// ✅ Correcto
video.addEventListener("loadedmetadata", () => {
  console.log(video.duration);
});

Casos avanzados

Precargar múltiples recursos:

const recursos = ["video1.mp4", "video2.mp4"];
let recursosListos = 0;

recursos.forEach(src => {
  const video = document.createElement("video");
  video.preload = "metadata";
  video.src = src;
  video.addEventListener("loadedmetadata", () => {
    recursosListos++;
    if (recursosListos === recursos.length) {
      iniciarAplicacion();
    }
  });
});

Reproductor personalizado con metadatos:

<div class="reproductor">
  <video id="video" src="video.mp4"></video>
  <div class="controles">
    <span id="tiempo">0:00</span>
    <input type="range" id="seekBar" min="0" max="100">
    <span id="duracionTotal">0:00</span>
  </div>
</div>

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

  video.addEventListener("loadedmetadata", () => {
    duracionTotal.textContent = formatearTiempo(video.duration);
  });

  function formatearTiempo(segundos) {
    const minutos = Math.floor(segundos / 60);
    const segs = Math.floor(segundos % 60);
    return `${minutos}:${segs.toString().padStart(2, '0')}`;
  }
</script>

Errores comunes

<!-- MAL: Asumir que los metadatos están disponibles inmediatamente -->
<video src="video.mp4" id="video"></video>
<script>
  // ❌ Incorrecto (duration puede ser 0)
  console.log(video.duration);
</script>

<!-- CONFUSIÓN: Usar en elementos no multimedia -->
<img onloadedmetadata="..."> <!-- No funciona -->

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí (v. 3+)
Firefox	✅ Sí (v. 3.5+)
Safari	✅ Sí (v. 3.1+)
Edge	✅ Sí (v. 12+)
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo onloadedmetadata es esencial para:

• Acceder a propiedades técnicas de recursos multimedia.
• Mejorar la UX mostrando información clave (duración, dimensiones).
• Inicializar componentes que dependen de metadatos.

Recuerda:

1. Espera a que se active el evento antes de usar propiedades como duration.
2. Combínalo con otros eventos (progress, canplay) para un control completo.
3. Prueba en diferentes dispositivos para garantizar consistencia.

¡Ahora puedes crear reproductores multimedia más informativos y profesionales!