Reproducción automática silenciada en dispositivos móviles. Olvídate de los trucos sobre lienzos y los GIF animados.

A partir de la versión 53, Chrome para Android admite la reproducción automática silenciada de videos. Si se configuran autoplay y muted, la reproducción comenzará automáticamente para un elemento de video cuando este aparezca. Además, la reproducción de videos silenciados se podrá iniciar de forma pragmática con play(). Anteriormente, la reproducción en dispositivos móviles tenía que iniciarse mediante un gesto del usuario, independientemente del estado silenciado.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Para ver cómo funciona, visita esta muestra. La reproducción del video de muted comienza automáticamente en Chrome 53 o versiones posteriores.

Captura de pantalla del reproductor de video.

Además, la reproducción silenciada ahora se puede iniciar con el método play(). Anteriormente, play() solo iniciaba la reproducción si provenía de un gesto del usuario, como un clic en un botón. Compara las siguientes dos demostraciones en Android: pruébalas en Chrome 53 y luego en una versión anterior:

Recomendamos usar el atributo autoplay siempre que sea posible y el método play() solo si es necesario.

Es posible activar el sonido de un video de forma programática en respuesta a un gesto del usuario, como un click, pero si intentas activar el sonido de un video de manera programática sin un gesto del usuario, se pausará la reproducción.

El cambio de muted autoplay también permitirá usar play() con un elemento video que no se haya creado en el DOM, por ejemplo, para impulsar la reproducción de WebGL.

El método play() también muestra una promesa, que se puede usar para verificar si está habilitada la reproducción programática silenciada. Hay un ejemplo de esto en simpl.info/video/scripted.

¿Por qué el cambio?

La reproducción automática se inhabilitó en versiones anteriores de Chrome en Android porque puede ser perjudicial, requerir muchos datos y a muchos usuarios no les gusta.

Inhabilitar la reproducción automática tuvo el efecto no deseado de llevar a los desarrolladores a alternativas como los GIF animados, además de los hackeos de <canvas> y <img>. Estas técnicas son mucho peores que los videos optimizados en términos de consumo de energía, rendimiento, requisitos de ancho de banda, costo de datos y uso de memoria. Los videos pueden ofrecer una calidad más alta que los GIF animados, con una compresión mucho mejor: alrededor de 10 veces en promedio y hasta 100 veces en el mejor de los casos. Es posible la decodificación de videos en JavaScript, pero consume considerablemente la batería.

Compara lo siguiente: el primero es un video y el segundo es un GIF animado:

Reproduciendo un clip de video.

Se ven bastante similares, pero el video tiene un tamaño inferior a 200 KB y el GIF animado supera los 900 KB.

Chrome y otros proveedores de navegadores son muy cuidadosos con respecto al ancho de banda del usuario. Para muchos usuarios en muchos contextos, el alto costo de datos suele ser una barrera de acceso mayor que la mala conectividad. Dada la prevalencia de soluciones alternativas, la reproducción automática silenciada no es algo que se pueda bloquear, por lo que ofrecer buenas APIs y valores predeterminados es lo mejor que puede hacer la plataforma.

La Web cada vez se centra más en los medios. Los diseñadores y desarrolladores siguen encontrando formas nuevas e imprevistas de usar los videos y desean un comportamiento coherente en todas las plataformas, por ejemplo, cuando usan videos de fondo como elemento de diseño. La reproducción automática silenciada habilita una funcionalidad como esta en dispositivos móviles y computadoras.

Los puntos más sutiles

  • Desde el punto de vista de la accesibilidad, la reproducción automática puede ser particularmente problemática. En Android 53 y versiones posteriores, se ofrece un parámetro de configuración para inhabilitar la reproducción automática por completo: en la configuración de contenido multimedia, selecciona Reproducción automática.
  • Este cambio no afecta al elemento audio: la reproducción automática sigue inhabilitada en Chrome para Android, ya que la reproducción automática silenciada no tiene mucho sentido para el audio.
  • No hay reproducción automática si se habilita el modo de Ahorro de datos. Si habilitas el modo de Ahorro de datos, se inhabilitará la reproducción automática en la configuración de contenido multimedia.
  • La reproducción automática silenciada funcionará para cualquier elemento de video visible en documentos visibles, iframes o de otro tipo.
  • Recuerda que para aprovechar el nuevo comportamiento, deberás agregar muted y autoplay: compara simpl.info/video con simpl.info/video/muted.

Asistencia

  • La reproducción automática silenciada es compatible con Safari en iOS 10 y versiones posteriores.
  • La reproducción automática, ya sea silenciada o no, ya es compatible con Firefox y el navegador de UC de Android: no bloquean ningún tipo de reproducción automática.

Más información