Política de reproducción automática en Chrome

Mejoró la experiencia del usuario, redujo los incentivos para instalar bloqueadores de anuncios y se redujo el consumo de datos.

François Beaufort

GitHub

Nota: La Política de Reproducción automática que se lanzó en Chrome 66 para elementos de audio y video está bloqueando aproximadamente la mitad de las reproducciones automáticas de contenido multimedia no deseado en Chrome. Para la API de Web Audio, la política de reproducción automática se lanzó en Chrome 71. Esto afecta a los juegos web, algunas aplicaciones de WebRTC y otras páginas web que usan funciones de audio. Puedes encontrar más detalles en la sección API de Web Audio a continuación.

Las políticas de reproducción automática de Chrome cambiaron en abril de 2018 y te contaré cómo y por qué esto afecta la reproducción de video con sonido. Alerta de spoiler: ¡A los usuarios les va a encantar!

Se encontraron memes de Internet con la etiqueta "reproducción automática" en Imgflip y Imgur.

Comportamientos nuevos

Como posiblemente notaste, los navegadores web están migrando a políticas de reproducción automática más estrictas para mejorar la experiencia del usuario, minimizar los incentivos para instalar bloqueadores de anuncios y reducir el consumo de datos en redes costosas o limitadas. El objetivo de estos cambios es brindar un mayor control de la reproducción a los usuarios y beneficiar a los publicadores con casos de uso legítimos.

Las políticas de reproducción automática de Chrome son simples:

• Siempre se permite la reproducción automática silenciada.
• Se permite la reproducción automática con sonido en los siguientes casos:
  • El usuario interactuó con el dominio (hacer clic, presionarlo, etcétera).
  • En computadoras de escritorio, se superó el umbral del Índice de participación con contenido multimedia del usuario, lo que significa que el usuario ya reprodujo un video con sonido.
  • El usuario agrega el sitio a la pantalla principal en un dispositivo móvil o instala la AWP en una computadora de escritorio.
• Los fotogramas principales pueden delegar el permiso de reproducción automática a sus iframes para permitir la reproducción automática con sonido.

Índice de participación en los medios

El índice de participación de medios (MEI) mide la propensión de un individuo a consumir contenido multimedia en un sitio. El enfoque de Chrome es una proporción entre las visitas y los eventos de reproducción de contenido multimedia significativos por origen:

• El consumo del contenido multimedia (audio/video) debe ser superior a siete segundos.
• El audio debe estar presente y activado.
• La pestaña con el video está activa.
• El tamaño del video (en píxeles) debe ser superior a 200x140.

A partir de eso, Chrome calcula una puntuación de participación con medios, que es la más alta en sitios en los que se reproduce contenido multimedia con regularidad. Cuando es lo suficientemente alto, el contenido multimedia solo puede reproducirse automáticamente en computadoras de escritorio.

El MEI de un usuario está disponible en la página interna de about://media-engagement.

Captura de pantalla de la página interna de about://media-engagement en Chrome

Cambios de desarrollador

Como desarrollador, te recomendamos que cambies el comportamiento de la política de reproducción automática de Chrome de forma local para probar tu sitio web y determinar los diferentes niveles de participación del usuario.

• La política de reproducción automática se puede inhabilitar por completo con una marca de línea de comandos: chrome.exe --autoplay-policy=no-user-gesture-required. Esto te permite probar tu sitio web como si el usuario estuviera muy comprometido con él y siempre se permitiría la reproducción automática de la reproducción.

• También puedes decidir si quieres asegurarte de que nunca se permita la reproducción automática. Para ello, inhabilita el MEI e inhabilita si los sitios con el MEI general más alto tienen la reproducción automática de forma predeterminada para los usuarios nuevos. Haz esto con marcas: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Delegación de iframe

Una política de permisos permite a los desarrolladores habilitar o inhabilitar de forma selectiva las funciones y las APIs del navegador. Una vez que un origen recibe permiso de reproducción automática, puede delegar ese permiso a iframes de origen cruzado con la política de permisos para reproducción automática. Ten en cuenta que la reproducción automática está permitida de forma predeterminada en los iframes del mismo origen.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Cuando se inhabilita la política de permisos para la reproducción automática, las llamadas a play() sin un gesto del usuario rechazarán la promesa con una NotAllowedError DOMException. Además, se ignorará el atributo de reproducción automática.

Advertencia: Los artículos anteriores recomiendan incorrectamente el uso del atributo gesture=media, que no es compatible.

Ejemplos

Ejemplo 1: Cada vez que un usuario visita VideoSubscriptionSite.com en su laptop, mira un programa de TV o una película. Como la puntuación de participación en los medios es alta, se permite la reproducción automática.

Ejemplo 2: GlobalNewsSite.com tiene contenido de texto y video. La mayoría de los usuarios visitan el sitio en busca de contenido de texto y ven videos solo ocasionalmente. La puntuación de participación en redes de los usuarios es baja, por lo que no se permitiría la reproducción automática si un usuario navega directamente desde una página de redes sociales o una búsqueda.

Ejemplo 3: LocalNewsSite.com tiene contenido de texto y video. La mayoría de las personas ingresan al sitio a través de la página principal y luego hacen clic en los artículos de noticias. Se permitiría la reproducción automática en las páginas de artículos de noticias debido a la interacción del usuario con el dominio. Sin embargo, debes asegurarte de que los usuarios no se sorprendan con la reproducción automática de contenido.

Ejemplo 4: MyMovieReviewBlog.com incorpora un iframe con un avance de película para ir con una opinión. Los usuarios interactuaron con el dominio para acceder al blog, por lo que se permite la reproducción automática. Sin embargo, el blog debe delegar de forma explícita ese privilegio al iframe para que el contenido se reproduzca automáticamente.

Políticas de Chrome Enterprise

Es posible cambiar el comportamiento de la reproducción automática con las políticas empresariales de Chrome para casos de uso como kioscos o sistemas sin supervisión. Consulta la página de ayuda de la lista de políticas para aprender a configurar las políticas empresariales relacionadas con la reproducción automática:

• La política AutoplayAllowed controla si se permite o no la reproducción automática.
• La política AutoplayAllowlist te permite especificar una lista de patrones de URL permitidos en los que la reproducción automática siempre estará habilitada.

Prácticas recomendadas para desarrolladores web

Elementos de audio y video

Recuerda lo siguiente: nunca des por sentado que el video se reproducirá y no muestres un botón de pausa cuando el video no se esté reproduciendo. Es muy importante que lo voy a escribir una vez más a continuación para aquellos que simplemente hojeen esa publicación.

Punto clave: No des por sentado que se reproducirá un video ni muestres un botón de pausa cuando el video no se esté reproduciendo.

Siempre debes observar la Promise que muestra la función de reproducción para ver si se rechazó:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Precaución: No reproduzcas anuncios intersticiales sin mostrar ningún control multimedia, ya que es posible que no se reproduzcan de forma automática y los usuarios no tengan forma de iniciar la reproducción.

Una forma genial de atraer a los usuarios es usar la reproducción automática silenciada y permitirles que elijan activar el sonido. (consulta el ejemplo a continuación). Algunos sitios web ya hacen esto de manera eficaz, como Facebook, Instagram, Twitter y YouTube.

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

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

Los eventos que activan la activación del usuario se deben definir de forma coherente en todos los navegadores. Por el momento, te recomiendo que uses "click". Consulta el problema de GitHub whatwg/html#3849.

Audio web

La API de Web Audio está cubierta por la reproducción automática desde Chrome 71. Hay algunas cosas que debes saber al respecto. En primer lugar, se recomienda esperar una interacción del usuario antes de iniciar la reproducción de audio para que los usuarios estén al tanto de algo. Por ejemplo, puedes usar un botón de "reproducir" o un interruptor de "encendido/apagado". También puedes agregar un botón para "activar el sonido" según el flujo de la app.

Nota: Si se crea un AudioContext antes de que el documento reciba un gesto del usuario, se creará en el estado "suspendido", y deberás llamar a resume() después del gesto del usuario.

Si creas tu AudioContext cuando se carga la página, deberás llamar a resume() algún tiempo después de que el usuario haya interactuado con la página (p.ej., después de que un usuario haga clic en un botón). Como alternativa, la AudioContext se reanudará después de un gesto del usuario si se llama a start() en cualquier nodo conectado.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

También puedes crear la AudioContext solo cuando el usuario interactúe con la página.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Para detectar si el navegador requiere una interacción del usuario para reproducir audio, verifica AudioContext.state después de crearlo. Si se permite la reproducción, debe cambiar de inmediato a running. De lo contrario, será suspended. Si escuchas el evento statechange, puedes detectar los cambios de forma asíncrona.

Para ver un ejemplo, consulta la pequeña solicitud de extracción que corrige la reproducción de audio web para estas reglas de la política de reproducción automática de https://airhorner.com.

Nota: Puedes encontrar un resumen de la función de reproducción automática de Chrome en el sitio de Chromium.