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

Chrome para Android admite la reproducción automática silenciada de videos a partir de la versión 53. La reproducción de un elemento de video comenzará automáticamente una vez que esté a la vista si se configuran autoplay y muted, y la reproducción de videos silenciados se puede iniciar de manera pragmática con play(). Anteriormente, la reproducción en dispositivos móviles debía iniciarse con un gesto del usuario, independientemente del estado de silenciamiento.

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

Para ver esto en acción, visita este ejemplo. 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, ahora se puede iniciar la reproducción silenciada 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 click, pero si intentas hacerlo 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 creó en el DOM, por ejemplo, para controlar 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. Puedes ver un ejemplo de esto en simpl.info/video/scripted.

¿Por qué se realizó el cambio?

La reproducción automática se inhabilitó en versiones anteriores de Chrome para Android porque puede ser disruptiva, consumir 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 GIFs animados, así como a los hacks de <canvas> y <img>. Estas técnicas son mucho peores que el video optimizado en términos de consumo de energía, rendimiento, requisitos de ancho de banda, costo de datos y uso de memoria. Los videos pueden proporcionar 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. La decodificación de videos en JavaScript es posible, pero agota enormemente la batería.

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

Se está reproduciendo un clip.

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 el ancho de banda de los usuarios. Para muchos usuarios y en muchos contextos, el alto costo de los datos suele ser una barrera mayor para el acceso que una conectividad deficiente. Debido a la prevalencia de las soluciones alternativas, la reproducción automática silenciada no es algo que se pueda bloquear, por lo que lo mejor que puede hacer la plataforma es ofrecer buenas APIs y parámetros predeterminados.

La Web se centra cada vez más en los medios. Los diseñadores y desarrolladores siguen encontrando formas nuevas y imprevistas de usar el video, y quieren que el comportamiento sea coherente en todas las plataformas, por ejemplo, cuando se usa el video de fondo como elemento de diseño. La reproducción automática silenciada habilita funciones 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. Chrome 53 y versiones posteriores en Android proporcionan un parámetro de configuración para inhabilitar la reproducción automática por completo: en 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 el Modo de ahorro de datos está habilitado. Si el modo Ahorro de datos está habilitado, la reproducción automática se inhabilita en la configuración de contenido multimedia.
  • La reproducción automática con sonido silenciado funcionará para cualquier elemento de video visible en cualquier documento, iframe o cualquier otro elemento visible.
  • Recuerda que, para aprovechar el nuevo comportamiento, deberás agregar muted y autoplay: compara simpl.info/video con simpl.info/video/muted.

Asistencia

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

Más información