La reproducción automática de audio y video en la Web es una función potente que está sujeta a diferentes restricciones en las distintas plataformas.
Actualmente, la mayoría de los navegadores para computadoras de escritorio siempre permitirán que las páginas web comiencen a reproducir <video> o <audio> a través de JavaScript sin interacción del usuario.
Sin embargo, la mayoría de los navegadores para dispositivos móviles requieren un gesto explícito del usuario para que se pueda iniciar la reproducción iniciada por JavaScript. Esto ayuda a garantizar que los usuarios de dispositivos móviles, muchos de los cuales pagan por el ancho de banda o pueden estar en un entorno público, no comiencen a descargar y reproducir contenido multimedia por accidente sin interactuar de forma explícita con la página.
Históricamente, ha sido difícil determinar si se requiere la interacción del usuario para iniciar la reproducción y detectar las fallas que ocurren cuando se intenta reproducir (automáticamente) y falla. Existen varias soluciones alternativas, pero no son ideales. Hace mucho tiempo que se necesita una mejora en el método subyacente play() para abordar esta incertidumbre, y ahora llegó a la plataforma web, con una implementación inicial en Chrome 50.
Una llamada a play() en un elemento <video> o <audio> ahora muestra una promesa. Si la reproducción se realiza correctamente, se completa la promesa y, si falla, se rechaza junto con un mensaje de error que explica la falla. Esto te permite escribir código intuitivo como el siguiente:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
Además de detectar si el método play() se realizó correctamente, la nueva interfaz basada en promesas te permite determinar cuándo se realizó correctamente el método play(). Hay contextos en los que un navegador web puede decidir retrasar el inicio de la reproducción. Por ejemplo, Chrome para computadoras de escritorio no comenzará a reproducir un <video> hasta que la pestaña sea visible. La promesa no se cumplirá hasta que comience la reproducción, lo que significa que el código dentro de then() no se ejecutará hasta que se reproduzca el contenido multimedia. Los métodos anteriores para determinar si play() se realiza correctamente, como esperar una cantidad determinada de tiempo para un evento playing y suponer un error si no se activa, son susceptibles a falsos negativos en situaciones de reproducción diferida.
Publicamos un ejemplo en vivo de esta nueva funcionalidad. Míralos en un navegador como Chrome 50 que admita esta interfaz basada en promesas. Ten en cuenta que la página reproducirá música automáticamente cuando la visites. (a menos que, por supuesto, no lo haga).
Zona de peligro
<source> dentro de <video> hace que la promesa de play() nunca se rechace.
Para <video src="not-existing-video.mp4"\>, la promesa de play() se rechaza como se espera, ya que el video no existe. Para <video><source src="not-existing-video.mp4" type='video/mp4'></video>, la promesa play() nunca se rechaza. Solo sucede si no hay fuentes válidas.