El Atributo ONLOADEDDATA

El atributo onloadeddata es un evento de JavaScript que se activa cuando el primer fotograma de un recurso multimedia (como <video> o <audio>) se ha cargado. Es útil para iniciar acciones que dependen de que al menos una parte del contenido esté disponible, como mostrar controles de reproducción o actualizar interfaces. Es más temprano que eventos como oncanplay o onloadedmetadata.

¿Qué hace onloadeddata?

• Disparador: Cuando el navegador ha cargado suficientes datos para mostrar el primer fotograma del contenido multimedia.

• Casos de uso:

  • Mostrar una miniatura o previsualización inicial.

  • Actualizar la interfaz indicando que el contenido está parcialmente listo.

  • Iniciar mediciones de rendimiento de carga.

¿Dónde se aplica?

Funciona en elementos multimedia:

• <video>

• <audio>

Sintaxis básica

Como atributo HTML (inline):

<video 
  src="video.mp4" 
  onloadeddata="console.log('Primer fotograma cargado')"
  controls
></video>

Con JavaScript (recomendado):

const video = document.getElementById("miVideo");
video.addEventListener("loadeddata", () => {
  console.log("Datos iniciales cargados");
});

Ejemplos prácticos

Ejemplo 1: Mostrar miniatura al cargar el primer fotograma

<video id="video" src="video.mp4"></video>
<button id="btnPlay" disabled>Reproducir</button>

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

  video.addEventListener("loadeddata", () => {
    btnPlay.disabled = false;
    console.log("Botón habilitado");
  });

  btnPlay.addEventListener("click", () => video.play());
</script>

Ejemplo 2: Actualizar barra de progreso inicial

<video id="video" src="video.mp4" controls></video>
<div class="progress-bar">
  <div id="progress" style="width: 0%; background: #4CAF50; height: 5px;"></div>
</div>

<script>
  document.getElementById("video").addEventListener("loadeddata", (e) => {
    const progress = (e.target.buffered.end(0) / e.target.duration) * 100;
    document.getElementById("progress").style.width = `${progress}%`;
  });
</script>

Diferencias clave entre eventos de carga multimedia

Evento	Descripción	Momento de activación
onloadeddata	Primer fotograma disponible	Al inicio de la carga
onloadedmetadata	Metadatos cargados (duración, dimensiones)	Antes de loadeddata
oncanplay	Suficientes datos para reproducir	Después de loadeddata
onprogress	Datos se están cargando activamente	Durante la carga

Mejores prácticas

Combínalo con onwaiting:

Para manejar buffering durante la reproducción:

video.addEventListener("waiting", () => {
  console.log("Esperando más datos...");
});

Usa preload="metadata":

Optimiza la carga inicial del recurso:

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

Maneja errores con onerror:

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

Casos avanzados

Medir el tiempo hasta el primer fotograma:

let inicioCarga = Date.now();

video.addEventListener("loadeddata", () => {
  const tiempoCarga = Date.now() - inicioCarga;
  console.log(`Tiempo al primer fotograma: ${tiempoCarga}ms`);
});

Precargar videos para una galería:

const videos = ["video1.mp4", "video2.mp4"];
videos.forEach(src => {
  const video = document.createElement("video");
  video.preload = "auto";
  video.src = src;
  video.addEventListener("loadeddata", () => {
    console.log(`${src} precargado parcialmente`);
  });
});

Errores comunes

<!-- MAL: Esperar que el video esté completamente cargado -->
<video onloadeddata="iniciarReproduccionCompleta()"></video>
<!-- loadeddata solo garantiza el primer fotograma -->

<!-- CONFUSIÓN: Usar en elementos no multimedia -->
<img onloadeddata="..."> <!-- 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 onloadeddata es útil para:

• Iniciar acciones tempranas al cargar contenido multimedia.
• Optimizar la experiencia del usuario con feedback inicial.
• Medir métricas de rendimiento de carga de medios.

Recuerda:

1. No confíes en este evento para reproducir el video completo (usa oncanplaythrough).
2. Combínalo con otros eventos para un manejo robusto.
3. Prueba en diferentes redes para simular condiciones reales.

¡Ahora puedes controlar la carga de contenido multimedia con precisión!