Solucionando el bloqueo del autoplay de mis videos

Son muchos los diseños que nos implican poner un video como fondo de página que se reproduzca en bucle o similar.

Son muchos los exploradores que han o van a impedir que estos videos se reproduzcan debido al mal uso de estos por parte de algunos webmaster (vídeos de publicidad abusiva, consumo excesivo de red y batería en los dispositivos...)

Excepciones a la regla

Como toda regla que se plazca, tenemos una serie de excepciones en las que si funciona la reproducción automática:

• 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:

• Si el consumo del medio es mayor a 7 segundos
• Si el audio está activado y no silenciado
• Si la pestaña del medio está activa y no en segundo plano
• 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 y, si es lo suficientemente alto, la reproducción automática en tu web se hará efectiva.

Puedes consultar tu propio MEI accediendo a chrome://media-engagement

Activar el autoplay en Chrome

Ahora bien, existe la posibilidad de saltarnos esta restricción simplemente haciendo que nuestro video no tenga sonido ("meteándolo"):

<video autoplay muted="muted">
  <source src="[ruta_video]/[video.mp4]" type="video/mp4">
</video>

También podemos añadir un control para que sea el usuario el que determine si quiere escuchar el video o no:

<video id="video" muted autoplay>
  <button id="unmuteButton"></button>

  <script>
    unmuteButton.addEventListener('click', function() {
      video.muted = false;
    });
  </script>
</video>

Esta última técnica es la que están aplicando web como Facebook, Instagram, Twitter y  el propio Youtube.