El Atributo ONEMPTIED

El atributo onemptied es un evento de JavaScript que se activa cuando un elemento multimedia (como <audio> o <video>) se vacía abruptamente. Esto ocurre cuando el recurso deja de estar disponible, se restablece o se interrumpe su carga. Es útil para manejar escenarios donde el contenido multimedia falla o se reinicia inesperadamente, mejorando la experiencia del usuario.

¿Qué hace onemptied?

• Disparador: Cuando el elemento multimedia pierde su fuente actual y queda en estado "vacío".

• Casos comunes:

  • Llamar al método load() para restablecer el elemento.

  • Eliminar la fuente del elemento (src = "").

  • Fallos en la carga de contenido en streaming.

• Estado resultante:

  • readyState = 0 (HAVE_NOTHING): El elemento no tiene información sobre el recurso.

  • duration = NaN: Duración desconocida.

Sintaxis básica

Como atributo HTML:

<video src="video.mp4" onemptied="manejarVacio()">
</video>

Con JavaScript (recomendado):

const video = document.getElementById("miVideo");
video.addEventListener("emptied", () => {
  console.log("El video se ha vaciado");
});

Ejemplos prácticos

Ejemplo 1: Mostrar mensaje de error

<video id="video" src="video.mp4" controls></video>
<p id="mensaje" style="color: red; display: none;">¡El video se ha perdido!</p>

<script>
  document.getElementById("video").addEventListener("emptied", () => {
    document.getElementById("mensaje").style.display = "block";
  });
</script>

Ejemplo 2: Reiniciar un reproductor personalizado

<div class="reproductor">
  <video id="video" src="video.mp4"></video>
  <button id="reiniciar">Reiniciar</button>
</div>

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

  video.addEventListener("emptied", () => {
    boton.style.display = "block";
  });

  boton.addEventListener("click", () => {
    video.src = "video.mp4";
    video.load();
    boton.style.display = "none";
  });
</script>

Ejemplo 3: Cargar una fuente alternativa automáticamente

<video id="video" src="stream-en-vivo.m3u8" controls></video>

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

  video.addEventListener("emptied", async () => {
    try {
      video.src = "respaldo.mp4";
      await video.play();
    } catch (error) {
      console.error("Error al cargar respaldo:", error);
    }
  });
</script>

Diferencias clave entre eventos relacionados

Evento	Descripción
onemptied	Elemento multimedia se vacía abruptamente
onabort	Usuario detuvo la carga manualmente
onerror	Ocurrió un error durante la carga/reproducción
onstalled	El navegador no puede recuperar datos

Mejores prácticas

Recuperación automática:

Intenta cargar una fuente alternativa al detectar emptied:

video.addEventListener("emptied", () => {
  if (video.src !== "respaldo.mp4") {
    video.src = "respaldo.mp4";
    video.load();
  }
});

Feedback al usuario:

Muestra mensajes claros y opciones de acción (ej: "Volver a cargar").

Limpiar recursos:

Detén la reproducción y libera memoria si es necesario:

video.pause();
video.removeAttribute("src");
video.load();

Casos avanzados

Monitoreo de transmisiones en vivo:

<video id="stream" controls>
  <source src="stream.m3u8" type="application/x-mpegURL">
</video>

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

  stream.addEventListener("emptied", () => {
    console.warn("La transmisión en vivo se ha interrumpido");
    // Reconectar después de 5 segundos
    setTimeout(() => {
      stream.src = "stream.m3u8";
      stream.load();
    }, 5000);
  });
</script>

Integración con APIs de estado:

let estadoServidor = "activo";

video.addEventListener("emptied", async () => {
  const respuesta = await fetch("/estado-servidor");
  if (!respuesta.ok) {
    mostrarModal("El servidor de medios está fuera de línea");
  }
});

Errores comunes

<!-- MAL: No manejar el evento -->
<video src="video.mp4"></video> <!-- El usuario no sabe qué pasó si falla -->

<!-- CONFUSIÓN: Usar onemptied para errores de red -->
<!-- Para errores de red, usa onerror en su lugar -->

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí (v. 15+)
Firefox	✅ Sí (v. 20+)
Safari	✅ Sí (v. 6+)
Edge	✅ Sí (v. 12+)
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo onemptied es esencial para:

• Manejar interrupciones inesperadas en contenido multimedia.
• Mejorar la resiliencia de reproductores en aplicaciones web.
• Ofrecer experiencias de usuario profesionales con recuperación automática.

Recuerda:

1. No abuses de reintentos automáticos sin notificar al usuario.
2. Combínalo con otros eventos (error, stalled) para un manejo completo.
3. Prueba en condiciones de red inestables para simular escenarios reales.

¡Ahora puedes crear reproductores robustos que manejen fallos con elegancia!