El Atributo ONCANPLAY

El atributo oncanplay es un evento de JavaScript que se activa cuando el navegador determina que un recurso multimedia (como audio o video) tiene suficientes datos para comenzar a reproducirse, aunque no necesariamente para completarse sin pausas. Es útil para mejorar la experiencia del usuario al interactuar con contenido multimedia.

¿Qué hace exactamente?

• Disparador: Se activa cuando:

  • El navegador ha cargado suficientes datos para iniciar la reproducción.

  • La metadata del archivo (duración, dimensiones, etc.) está disponible.

• Uso típico:

  • Habilitar controles de reproducción.

  • Mostrar mensajes de "listo para reproducir".

  • Iniciar reproducción automática (con restricciones).

Elementos compatibles

Funciona en elementos multimedia:

• <video>

• <audio>

Sintaxis básica

Como atributo HTML:

<video 
  src="video.mp4" 
  oncanplay="manejarListoParaReproducir()"
  controls
></video>

Con JavaScript (recomendado):

const video = document.getElementById('miVideo');
video.addEventListener('canplay', function() {
  console.log('El video puede comenzar a reproducirse');
});

Ejemplos prácticos

Ejemplo 1: Habilitar botón de reproducción

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

<script>
  document.getElementById('miVideo').oncanplay = function() {
    document.getElementById('btnPlay').disabled = false;
  };

  document.getElementById('btnPlay').addEventListener('click', function() {
    document.getElementById('miVideo').play();
  });
</script>

Ejemplo 2: Mostrar tiempo de duración

<video id="tutorial" src="tutorial.mp4" oncanplay="mostrarInfo()"></video>
<p id="duracion"></p>

<script>
  function mostrarInfo() {
    const video = document.getElementById('tutorial');
    document.getElementById('duracion').textContent = 
      `Duración: ${Math.round(video.duration)} segundos`;
  }
</script>

Ejemplo 3: Carga progresiva con feedback

<video id="video" controls>
  <source src="presentacion.webm" type="video/webm">
</video>
<div id="carga">Cargando video...</div>

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

  video.oncanplay = () => {
    carga.style.display = 'none';
    video.controls = true;
  };

  video.onwaiting = () => {
    carga.style.display = 'block';
  };
</script>

Diferencias clave entre eventos relacionados

Evento	Descripción
oncanplay	Puede comenzar la reproducción (buffer mínimo)
oncanplaythrough	Puede reproducirse hasta el final sin pausas
onloadeddata	Primer frame está listo
onprogress	El navegador está cargando datos activamente

---

Mejores prácticas

Precarga opcional:

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

• preload="none": No cargar hasta que el usuario interactúe.

• preload="metadata": Cargar solo metadatos.

• preload="auto": Carga completa (usa con cuidado).

Manejo de errores:

video.onerror = () => {
  console.error('Error al cargar el video');
};

Accesibilidad:

• Proveer subtítulos con <track>.

• Incluir controles de teclado para reproducción.

Casos avanzados

Reproducción automática condicional:

video.addEventListener('canplay', () => {
  if (video.autoplay && document.visibilityState === 'visible') {
    video.play().catch(() => {
      // Manejar políticas de autoplay bloqueadas
    });
  }
});

Calidad adaptable:

const fuentes = [
  { src: 'video-360p.mp4', res: 360 },
  { src: 'video-720p.mp4', res: 720 }
];

video.oncanplay = () => {
  const anchoPantalla = window.innerWidth;
  const mejorFuente = fuentes.reduce((prev, curr) => 
    (curr.res <= anchoPantalla && curr.res > prev.res) ? curr : prev
  );
  
  if (video.src !== mejorFuente.src) {
    video.src = mejorFuente.src;
    video.load();
  }
};

Errores comunes

<!-- MAL: Usar en elementos no multimedia -->
<div oncanplay="..."></div> <!-- No funciona -->

<!-- CONFUSIÓN: Esperar reproducción completa -->
<video oncanplay="video.play()"></video> <!-- Se detendrá si el buffer se agota -->

<!-- OLVIDAR restricciones de autoplay -->
<script>
  video.oncanplay = () => video.play(); // Puede fallar en móviles
</script>

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí (v. 3+)
Firefox	✅ Sí (v. 3.5+)
Safari	✅ Sí
Edge	✅ Sí
Móviles	✅ Sí (con restricciones)

Conclusión

El atributo oncanplay es esencial para:

• Mejorar la experiencia multimedia con feedback visual.
• Optimizar la reproducción según condiciones de red.
• Coordinar acciones con la disponibilidad del contenido.

Recuerda:

1. Nunca asumas que la reproducción será continua.
2. Combínalo con otros eventos (onprogress, onended) para un manejo completo.
3. Respeta las políticas de autoplay de los navegadores.

¡Ahora puedes crear experiencias multimedia más fluidas y profesionales!