El Atributo ONENDED

El atributo onended es un evento de JavaScript que se activa cuando un elemento multimedia (como <audio> o <video>) termina de reproducirse por completo. Es ideal para automatizar acciones posteriores a la reproducción, como reproducir el siguiente elemento de una lista, reiniciar contenido o mostrar mensajes al usuario.

¿Qué hace onended?

• Disparador: Cuando el elemento multimedia alcanza el final de su reproducción.

• Casos de uso comunes:

  • Reproducir automáticamente el siguiente archivo en una lista.

  • Mostrar opciones de "reproducir de nuevo" o "siguiente".

  • Registrar estadísticas de reproducción completada.

  • Reiniciar animaciones o pantallas interactivas.

Sintaxis básica

Como atributo HTML:

<audio src="cancion.mp3" onended="manejarFin()"></audio>

Con JavaScript (recomendado):

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

Ejemplos prácticos

Ejemplo 1: Reproducir automáticamente el siguiente video

<video id="video1" src="video1.mp4" onended="cargarSiguiente()"></video>
<video id="video2" src="video2.mp4" style="display: none;"></video>

<script>
  function cargarSiguiente() {
    document.getElementById("video1").style.display = "none";
    const video2 = document.getElementById("video2");
    video2.style.display = "block";
    video2.play();
  }
</script>

jemplo 2: Mostrar mensaje al finalizar

<audio id="audio" src="podcast.mp3" controls></audio>
<p id="mensaje" style="display: none;">¿Reproducir de nuevo?</p>
<button id="replay" style="display: none;" onclick="reproducirDeNuevo()">▶</button>

<script>
  const audio = document.getElementById("audio");
  audio.addEventListener("ended", () => {
    document.getElementById("mensaje").style.display = "block";
    document.getElementById("replay").style.display = "block";
  });

  function reproducirDeNuevo() {
    audio.currentTime = 0;
    audio.play();
    document.getElementById("mensaje").style.display = "none";
    document.getElementById("replay").style.display = "none";
  }
</script>

Ejemplo 3: Reproductor de lista de reproducción

<audio id="reproductor"></audio>
<button onclick="cambiarCancion(1)">Canción 1</button>
<button onclick="cambiarCancion(2)">Canción 2</button>

<script>
  const canciones = ["musica1.mp3", "musica2.mp3"];
  const reproductor = document.getElementById("reproductor");

  function cambiarCancion(indice) {
    reproductor.src = canciones[indice - 1];
    reproductor.play();
  }

  reproductor.addEventListener("ended", () => {
    const indiceActual = canciones.indexOf(reproductor.src);
    const siguiente = (indiceActual + 1) % canciones.length;
    cambiarCancion(siguiente + 1);
  });
</script>

Diferencias clave entre eventos relacionados

Evento	Descripción
onended	Reproducción completada exitosamente
onpause	Reproducción pausada manualmente
onstop	No es un evento estándar (usar onpause o onabort)
onerror	Error durante la reproducción

Mejores prácticas

Reproducción en bucle:

Si necesitas repetir automáticamente, usa loop en lugar de onended:

<video src="animacion.mp4" loop></video>

Accesibilidad:

Añade controles claros para "repetir" o "siguiente".

Usa aria-live para anunciar cambios:

<p aria-live="polite" id="estado">Reproduciendo...</p>

Manejo de listas grandes:

Para listas extensas, carga dinámicamente los archivos desde un servidor usando fetch o APIs como MediaSource.

Casos avanzados

Integración con API de aprendizaje:

<video id="leccion" src="clase.mp4" onended="registrarProgreso()"></video>

<script>
  async function registrarProgreso() {
    const usuario = "user123";
    const respuesta = await fetch(`/api/progreso/${usuario}`, {
      method: "POST",
      body: JSON.stringify({ leccionCompleta: true })
    });
    if (respuesta.ok) mostrarMensaje("¡Progreso guardado!");
  }
</script>

Reproductor tipo "reloj de arena":

<video id="temporizador" src="animacion-arena.mp4"></video>
<button onclick="iniciarTemporizador(300)">5 minutos</button>

<script>
  function iniciarTemporizador(segundos) {
    const video = document.getElementById("temporizador");
    video.currentTime = video.duration - segundos; // Ajustar al final
    video.play();

    video.onended = () => alert("¡Tiempo terminado!");
  }
</script>

Errores comunes

<!-- MAL: Asumir que el evento se dispara siempre -->
<video src="video.mp4" onended="funcionCritica()"></video>
<!-- ¡Si hay un error, onended no se ejecutará! -->

<!-- CONFUSIÓN: Usar onended para pausas manuales -->
<!-- onended solo se activa al final natural -->

Compatibilidad

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

Conclusión

El atributo onended es esencial para:

• Automatizar flujos posteriores a la reproducción multimedia.
• Mejorar la interactividad en aplicaciones educativas, entretenimiento o herramientas productivas.
• Crear experiencias dinámicas con feedback inmediato al usuario.

Recuerda:

1. No dependas exclusivamente de onended para acciones críticas (combínalo con manejo de errores).
2. Optimiza el rendimiento en listas largas de reproducción.
3. Prueba en múltiples navegadores para garantizar consistencia.

¡Ahora puedes crear reproductores multimedia inteligentes y profesionales!