Cómo solucionar el bloqueo del 'autoplay' de Chrome en Drupal

Llegas a tu puesto de trabajo como cualquier otro día, inicias tu proyecto Drupal para ponerte manos a la obra y, de repente, te encuentras con que ninguno de tus medios funciona correctamente.

En mi caso concreto, se trató de un simple vídeo intro en la frontpage que no se iniciaba en el navegador Chrome. Esto causó muchas confusiones en busca de errores de sintaxis, incompatibilidad, SASS… Pero estábamos lejos de descubrir de lo que realmente se trataba: el atributo autoplay en los navegadores Chrome.

Cómo funciona el nuevo atributo 'autoplay' en Chrome

Chrome ya avisó con antelación de sus planes. La autoreproducción o “autoplay” de medios estaba haciendo que se reprodujeran vídeos de publicidad abusiva inesperadamente ante el usuario, además de un consumo excesivo de red y batería en los dispositivos.

 

Para solucionar esto, el navegador de Google se propuso en septiembre del 2017 poner fin a este tipo de problemas. Y así ha sido, aunque se ha retrasado dos versiones (se planeó lanzar en la release 64).

La nueva política en el navegador ha llegado en la release 66: ya no se reproducirá automáticamente ningún medio que produzca sonido. Este nuevo comportamiento ha generado fallos inesperados en miles de páginas y proyectos web, así como en juegos, causando quejas ante estas políticas por parte de los desarrolladores.

La autoreproducción se seguirá mantiendo si se cumplen alguno de los siguientes casos:

 

• Si el vídeo no produce sonido
• Si el usuario ha interactuado por el dominio antes de visualizar el vídeo
• Si el usuario ha agregado el sitio a su pantalla de inicio (solo en móviles)
• Si tu sitio web está en la “whitelist” o lista blanca de más de 1000 sitios web que ha generado Google, como por ejemplo Youtube.
• Si el usuario ha cruzado el umbral del índice de interacción con los medios (MEI)

 

El MEI mide la propensión de un usuario ante el consumo de medios en un sitio web. Este cálculo que se realiza en Chrome se hará efectivo si se cumplen las siguientes condiciones:

 

1. Si el consumo del medio es mayor a 7 segundos
2. Si el audio está activado y no silenciado
3. Si la pestaña del medio está activa y no en segundo plano
4. Si el tamaño del vídeo supera los 200x140 px.

 

En caso de que se cumplan, Chrome puntuará el MEI en tu sitio web. Cuando es lo suficientemente alto, la reproducción automática en tu web se hará efectiva.

Como usuario de Chrome puedes visualizar tu propio MEI en la página interna chrome://media-engagement.

Cómo afecta la nueva política de autoplay a desarrolladores y usuarios de portales Drupal

En general, para todos los usuarios de portales Drupal es un cambio a mejor, ya que se evita el uso excesivo de batería y red en los dispositivos al reproducirse de forma autónoma vídeos no deseados.

 

Sin embargo, en la otra cara de la moneda se encuentra el mundo del desarrollo, donde miles de Drupal que no siguan teniendo soporte actualmente, quedarán sin la visualización de vídeos o juegos que nunca se reproducirán, cayendo en el abismo de páginas web destruidas por la temible política de la release 666... al menos en Google Chrome.

Sin embargo, si estás trabajando actualmente en el desarrollo de un portal en Drupal, tienes a su disposición algunas soluciones, que veremos a continuación.

Cómo usar la autoreproducción de medios correctamente en Drupal

Para usar la reproducción automática de medios en Drupal para que sea compatible con todos los navegadores, podemos tomar diferentes caminos.

Desactivar la política a la hora de desarrollar

Para desarrollar en Drupal  es normal que queramos deshabilitar de manera local esta política.

Para desactivarla, lo haremos desde el enlace interno chrome://flags/#autoplay-policy

 

Mutear el medio

Como ya mencionamos anteriormente, un medio que no produzca sonido puede reproducirse automáticamente. Si hacemos uso del atributo “muted” podemos silenciar un vídeo en html5 y lograr que funcione el autoplay.

<video autoplay muted="muted">

<source src="/themes/custom/project/video/myvideo.mp4" type="video/mp4">

</video>

Dejar decidir al usuario

Una forma que ya están usando páginas web como Facebook, Instagram, Twitter y Youtube, consiste en reproducir el vídeo sin sonido y dejar decidir al usuario cuándo desactivar el silencio.

<video id="video" muted autoplay>

<button id="unmuteButton"></button>



<script>

unmuteButton.addEventListener('click', function() {

video.muted = false;

});

</script>

 

Todas estas políticas están abiertas a cambios por parte de Google Chrome, pero por el momento las cosas seguirán así un largo periodo de tiempo.

Es importante destacar, que nunca hay que dar por hecho que un vídeo se reproducirá en nuestro Drupal, ya que eso siempre (y cada vez más) va a ser decisión del usuario final.