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 y queremos aclararte te explica cómo y por qué esto afecta la reproducción de video con sonido. Alerón alerta: ¡a los usuarios les va a encantar!
Nuevos comportamientos
Como notaste, los navegadores web están adoptando una reproducción automática más estricta para mejorar la experiencia del usuario y minimizar los incentivos de instalación bloqueadores de anuncios y reducen el consumo de datos en anuncios redes. El objetivo de estos cambios es brindarles a los usuarios un mayor control de 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 en el contenido multimedia del usuario, lo que significa que el usuario ya reprodujo un video con sonido.
- El usuario agregó el sitio a su pantalla principal en su dispositivo móvil. instaló la AWP en una computadora.
- Los marcos superiores 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 en el contenido multimedia (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 medios significativos eventos de reproducción por origen:
- El consumo del contenido multimedia (audio o 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 200 x 140.
A partir de eso, Chrome calcula una puntuación de participación en el contenido multimedia, que es más alta en los sitios en los que se reproduce contenido multimedia con regularidad. Cuando está lo suficientemente alto, el contenido multimedia pueden reproducirse automáticamente en computadoras de escritorio únicamente.
El MEI de un usuario está disponible en la página interna about://media-engagement.
about://media-engagement en Chrome.
Interruptores para desarrolladores
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 diferentes niveles de participación de los usuarios en tu sitio web.
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 la reproducción automática siempre estuviera permitida.También puedes inhabilitar el MEI y decidir si quieres asegurarte de que nunca se permita la reproducción automática, o 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 y desactivar de forma selectiva las funciones y las APIs del navegador. Cuando un origen recibe la reproducción automática puede delegar ese permiso a iframes de origen cruzado con el 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">
Si inhabilitas la política de permisos para la reproducción automática, se llamará a play() sin un
gesto del usuario rechazará la promesa con una DOMException NotAllowedError. Además, también se ignorará el atributo autoplay.
Ejemplos
Ejemplo 1: Cada vez que un usuario visita VideoSubscriptionSite.com en su
laptop miran un programa de TV o una película. Como su 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 van al sitio en busca de contenido de texto y miran videos solo de vez en cuando.
La puntuación de participación en el contenido multimedia 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 las noticias.
. Se permitiría la reproducción automática en las páginas
de artículos de noticias debido a la
interacción con el dominio. Sin embargo, se debe tener cuidado para asegurarse de que el contenido con reproducción automática no sorprenda a los usuarios.
Ejemplo 4: MyMovieReviewBlog.com incorpora un iframe con un avance de película en
vayan con una revisió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 explícitamente
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 Lista de políticas para obtener información sobre cómo configurar las políticas empresariales relacionadas con la reproducción automática:
- La política
AutoplayAllowedcontrola si la reproducción automática está permitida o no. - La política
AutoplayAllowlistte permite especificar una lista de entidades permitidas de patrones de URL en la que la reproducción automática siempre estará habilitada.
Prácticas recomendadas para desarrolladores web
Elementos de audio y video
Recuerda que nunca debes suponer que se reproducirá un video ni mostrar un botón de pausa cuando no se esté reproduciendo. Es tan importante que lo volveré a escribir a continuación para quienes solo repasen la publicación.
Siempre debes consultar la función Promise que muestra la función play 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.
});
}
Una buena forma de atraer a los usuarios es usar la reproducción automática silenciada y permitirles que elijan para dejar de silenciar. (consulta el ejemplo que aparece a continuación). Algunos sitios web ya lo hacen de manera eficaz, incluidos Facebook, Instagram, Twitter y YouTube.
<video id="video" muted playsinline 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 se deben definir de forma coherente en
navegadores. Por el momento, te recomendaría que utilices "click". Consulta
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 una interacción del usuario antes de iniciar la reproducción de audio para que los usuarios sepan que está sucediendo algo. Piensa en una "obra" o "activar/desactivar". por ejemplo. También puedes agregar la opción para activar el sonido según el flujo de la aplicación.
Si creas tu AudioContext en la carga de la página, deberás llamar a resume() en algún momento después de que el usuario interactúe con la página (p. ej., después de que 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úa con la página.
document.querySelector('button').addEventListener('click', function() {
var context = new AudioContext();
// Setup all nodes
// ...
});
Para detectar si el navegador requiere la interacción del usuario para reproducir audio, verifica
AudioContext.state después de haberlo creado. Si se permite la reproducción, debería 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 el Reproducción de audio web para estas reglas de la política de reproducción automática en https://airhorner.com.