Mejoró la experiencia del usuario, minimizó los incentivos para instalar bloqueadores de anuncios y redujo el consumo de datos.
Las políticas de reproducción automática de Chrome cambiaron en abril de 2018. Te explicaré por qué y cómo esto afecta la reproducción de videos con sonido. Alerta de spoiler: ¡A los usuarios les va a encantar!
![Liam Neeson: Te encontraré y te pausaré.](https://developer.chrome.google.cn/static/blog/autoplay/image/liam-neeson-will-find-a2c50097288a9.jpeg?authuser=1&hl=es)
![Uno no solo reproduce videos
automáticamente.](https://developer.chrome.google.cn/static/blog/autoplay/image/sean-bean-does-simply-0d857d6f4d0c1.jpeg?authuser=1&hl=es)
Nuevos comportamientos
Como posiblemente notaste, los navegadores web están adoptando 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 brindarles a los usuarios un mayor control sobre la reproducción y beneficiar a los publicadores con casos de uso legítimos.
Las políticas de reproducción automática de Chrome son simples:
- La reproducción automática silenciada siempre está permitida.
- Se permite la reproducción automática con sonido en los siguientes casos:
- El usuario interactuó con el dominio (haga clic, presione, etc.).
- En computadoras, se superó el umbral del Índice de participación de medios del usuario, lo que significa que el usuario reprodujo videos con sonido anteriormente.
- El usuario agregó el sitio a su pantalla principal en un dispositivo móvil o instaló 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 interacción con los medios (MEI) mide la propensión de una persona a consumir contenido multimedia en un sitio. El enfoque de Chrome consiste en una proporción de visitas a eventos de reproducción de contenido multimedia significativos por origen:
- El consumo del contenido multimedia (audio o video) debe ser superior a siete segundos.
- El audio debe estar presente y tener activado el sonido.
- La pestaña con el video está activa.
- El tamaño del video (en píxeles) debe ser superior a 200 x 140.
A partir de eso, Chrome calcula una puntuación de participación de medios, que es la más alta en sitios en los que el contenido multimedia se reproduce con regularidad. Cuando el contenido es lo suficientemente alto, el contenido multimedia solo puede reproducirse automáticamente en computadoras.
El MEI de un usuario está disponible en la página interna de about://media-engagement
.
![Captura de pantalla de la página interna about://media-engagement.](https://developer.chrome.google.cn/static/blog/autoplay/image/screenshot-aboutmedia-64ed320fffd89.png?authuser=1&hl=es)
about://media-engagement
en Chrome.
Interruptores de desarrollador
Como desarrollador, es posible que quieras cambiar el comportamiento de la política de reproducción automática de Chrome a nivel local para probar tu sitio web en función de los diferentes niveles de participación de los usuarios.
Puedes inhabilitar por completo la política de reproducción automática 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 reproducción.También puedes asegurarte de que nunca se permita la reproducción automática. Para ello, inhabilita el MEI y si los sitios con el MEI general más alto obtienen 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 les permite a los desarrolladores habilitar o inhabilitar de forma selectiva las funciones y las APIs del navegador. Una vez que un origen recibe el permiso de reproducción automática, puede delegar ese permiso a los iframes de origen cruzado con la política de permisos de reproducción automática. Ten en cuenta que la reproducción automática se permite 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 está inhabilitada 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 DOMException NotAllowedError
. Y también se ignorará el atributo de reproducción automática.
Ejemplos
Ejemplo 1: Cada vez que un usuario visita VideoSubscriptionSite.com
en su laptop, mira un programa de TV o una película. Como su puntuación de participación 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 para buscar contenido de texto y ven videos solo ocasionalmente.
La puntuación de participación en los medios 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 tener cuidado para asegurarte de que los usuarios no se sorprendan por el contenido de reproducción automática.
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 llegar 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 de Chrome Enterprise para casos de uso como kioscos o sistemas sin supervisión. Consulta la página de ayuda Lista de políticas para aprender a establecer 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: nunca supongas que se reproducirá un video ni muestres un botón de pausa cuando el video no se esté reproduciendo. Es muy importante que la escribiré una vez más a continuación para quienes simplemente leen una lectura rápida a esa publicación.
Siempre debes consultar la función Promise que muestra la función Play para verificar 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.
});
}
Una buena forma de atraer a los usuarios es usar la reproducción automática silenciada y permitirles activar el sonido. (Consulta el siguiente ejemplo). Algunos sitios web, como Facebook, Instagram, Twitter y YouTube, ya lo hacen de forma eficaz.
<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 aún deben definirse de manera coherente en todos los navegadores. Por el momento, te recomendaría que utilices "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 a que el usuario interactúe antes de iniciar la reproducción de audio para que estén al tanto de algo. Por ejemplo, piensa en un botón de "reproducir" o de "encendido/apagado". También puedes agregar un botón para "activar el sonido" según el flujo de la app.
Si creas tu AudioContext
cuando se carga la página, deberás llamar a resume()
en algún momento 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, se reanudará AudioContext
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 el 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 inmediatamente a running
. De lo contrario, será suspended
. Si escuchas el evento statechange
, puedes detectar 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.