La reproducción automática de audio y video en la Web es una función potente que está sujeta a diferentes restricciones según la plataforma.
Actualmente, la mayoría de los navegadores para computadoras de escritorio permiten que las páginas web inicien la reproducción de <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 antes de que pueda ocurrir la reproducción iniciada por JavaScript. Esto ayuda a garantizar que los usuarios de dispositivos móviles, muchos de los cuales pagan por ancho de banda o que pueden estar en un entorno público, no comiencen a descargar y reproducir contenido multimedia por accidente sin interactuar explícitamente 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 una reproducción (automática) y falla. Existen varias soluciones, pero no son las ideales. Se venció hace tiempo una mejora en el método play() subyacente para abordar esta incertidumbre, y ya 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 cumple la promesa y, si falla la reproducción, se rechaza la promesa junto con un mensaje de error en el que se explica la falla. Esto te permite escribir un 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() tuvo éxito, la nueva interfaz basada en promesas te permite determinar cuándo el método play() tuvo éxito. Hay contextos en los que un navegador web puede decidir retrasar el inicio de la reproducción. Por ejemplo, en las computadoras de escritorio Chrome no comenzará la reproducción de una <video> hasta que la pestaña esté 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 esté reproduciendo el contenido multimedia. Los métodos anteriores para determinar si play() tiene éxito, como esperar una cantidad determinada de tiempo para un evento playing y asumir una falla si no se activa, son susceptibles a falsos negativos en situaciones de reproducción retrasada.
Publicamos un ejemplo real de esta nueva funcionalidad. Puedes verla en un navegador, como Chrome 50, que admita esta interfaz basada en promesas. Advertencia: La página reproducirá música automáticamente cuando la visites. (A menos que, por supuesto, no).
Zona de peligro
<source> dentro de <video> hace que la promesa play() nunca se rechace.
En el caso de <video src="not-existing-video.mp4"\>, la promesa play() se rechaza según lo esperado, 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.