El autocompletado silenciado de videos es compatible con Chrome para Android a partir de la versión 53. La reproducción de un elemento de video comenzará automáticamente cuando aparezca en la vista si se configuran autoplay y muted, y la reproducción de videos silenciados se puede iniciar de forma pragmática con play(). Anteriormente, la reproducción en dispositivos móviles debía iniciarse con un gesto del usuario, independientemente del estado de silencio.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Puedes ver esto en acción en este ejemplo. La reproducción del video muted comienza automáticamente en Chrome 53 o versiones posteriores.
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 de botón. Compara las siguientes dos demostraciones en Android. Pruébalas en Chrome 53 y, luego, en una versión anterior:
Te recomendamos que uses el atributo autoplay siempre que sea posible y el método play() solo si es necesario.
Es posible reactivar el audio de un video de forma programática en respuesta a un gesto del usuario, como un click, pero si intentas reactivar el audio de un video de forma programática sin un gesto del usuario, se pausará la reproducción.
El cambio en muted autoplay también permitirá usar play() con un elemento video que no se haya creado en el DOM, por ejemplo, para controlar la reproducción de WebGL.
El método play() también devuelve una promesa, que se puede usar para verificar si está habilitada la reproducción programática silenciada. Puedes ver un ejemplo en simpl.info/video/scripted.
¿Por qué se hizo este cambio?
La reproducción automática se inhabilitó en versiones anteriores de Chrome en Android porque puede ser molesta, 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 GIF animados, así como a soluciones alternativas 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. El video puede proporcionar una calidad superior a la de los GIFs 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 video en JavaScript es posible, pero consume mucha batería.
Compara lo siguiente: el primero es un video y el segundo es un GIF animado:
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 extremadamente cautelosos con el ancho de banda del usuario. Para muchos usuarios en muchos contextos, el costo alto de los datos suele ser un obstáculo mayor para el acceso que la conectividad deficiente. Dada la prevalencia de las soluciones alternativas, el bloqueo del Autoplay silenciado no es algo que se pueda hacer, por lo que ofrecer buenas APIs y valores predeterminados es lo mejor que puede hacer la plataforma.
La Web se centra cada vez más en los medios. Los diseñadores y desarrolladores siguen encontrando formas nuevas e imprevistas de usar el video, y quieren un comportamiento coherente en todas las plataformas, por ejemplo, cuando usan el video en segundo plano como elemento de diseño. El Autoplay silenciado habilita funciones como esta en dispositivos móviles y computadoras.
Los detalles
- 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 ofrecen un parámetro de configuración para inhabilitar la reproducción automática por completo: en la configuración de medios, selecciona Reproducción automática.
- Este cambio no afecta el 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 Multimedia.
- La reproducción automática silenciada funcionará para cualquier elemento de video visible en cualquier documento, iframe o de otro tipo visible.
- Recuerda que, para aprovechar el nuevo comportamiento, deberás agregar
mutedyautoplay: 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 Firefox y UC Browser en Android: no bloquean ningún tipo de reproducción automática.