Nuevos comportamientos

Como habrás notado , 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 caras y / o restringidas. Estos cambios están destinados a dar un mayor control de la reproducción a los usuarios y beneficiar a los editores 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.
• Reproducción automática con sonido está permitido si:
  • El usuario ha interactuado con el dominio (haga clic, toque, etc.).
  • En el escritorio, se ha cruzado el umbral del Índice de interacción con los medios del usuario, lo que significa que el usuario ya ha reproducido video con sonido.
  • En dispositivos móviles, el usuario ha agregado el sitio a su pantalla de inicio .
• Los marcos superiores pueden delegar permisos de reproducción automática a sus iframes para permitir la reproducción automática con sonido.

Índice de interacción con los medios (MEI)

El MEI mide la propensión de un individuo a consumir medios en un sitio. El enfoque actual de Chrome es una proporción de visitas a eventos significativos de reproducción de medios por origen:

• El consumo del medio (audio / video) debe ser mayor a 7 segundos.
• El audio debe estar presente y no silenciado.
• La pestaña con video está activa.
• El tamaño del video (en px) debe ser mayor a 200×140 .

A partir de eso, Chrome calcula una puntuación de participación de medios que es más alta en los sitios donde se reproducen los medios de forma periódica. Cuando es lo suficientemente alto, la reproducción multimedia solo se puede reproducir automáticamente en el escritorio.

El MEI del usuario está disponible en la página interna chrome: // media-engagement .

Interruptores de desarrollador

Como desarrollador, es posible que desee cambiar el comportamiento de la política de reproducción automática de Chrome localmente para probar su sitio web en función del compromiso del usuario.

• Puede decidir deshabilitar por completo la política de reproducción automática estableciendo la opción “Política de reproducción automática” de Chrome en “No se requiere gesto del usuario” en chrome://flags/#autoplay-policy . Esto le permite probar su sitio web como si el usuario estuviera muy comprometido con su sitio y la reproducción automática de la reproducción siempre estaría permitida.
• También puede decidir asegurarse de que la reproducción automática de la reproducción nunca se permita deshabilitando el uso de MEI, aplicando la política de reproducción automática a Web Audio y si los sitios con la MEI general más alta obtienen reproducción automática de la reproducción de forma predeterminada para los usuarios nuevos. Esto se puede hacer con tres conmutadores internos con chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies .

Delegación Iframe

Una política de características permite a los desarrolladores habilitar y deshabilitar de forma selectiva el uso de varias características y API del navegador. Una vez que un origen ha recibido el permiso de reproducción automática, puede delegar ese permiso a los iframes de origen cruzado con una nueva política de características para la reproducción automática . Tenga en cuenta que la reproducción automática está permitida por defecto en iframes de mismo origen.

 <! - Reproducción automática está permitido.  ->
 <iframe src = "https://cross-origin.com/myvideo.html" allow = "autoplay">

 <! - Reproducción automática y pantalla completa están permitidos.  ->
 <iframe src = "https://cross-origin.com/myvideo.html" allow = "reproducción automática; pantalla completa">

Cuando la política de características para la reproducción automática está desactivada, las llamadas a play()sin un gesto de usuario rechazarán la promesa con una NotAllowedError DOM NotAllowedError. Y el atributo de reproducción automática también se ignorará.

Escenarios de ejemplo

Ejemplo 1: cada vez que un usuario visita VideoSubscriptionSite.com en su computadora portátil, ve un programa de TV o una película. Como su puntaje de compromiso con los medios es alto, se permite la reproducción automática.

Ejemplo 2: GlobalNewsSite.com tiene contenido de texto y video. La mayoría de los usuarios visita el sitio para obtener contenido de texto y ver videos solo ocasionalmente. La puntuación de participación de 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 ingresa al sitio a través de la página de inicio y luego hace clic en los artículos de noticias. Se permitiría la reproducción automática en las páginas de los artículos de noticias debido a la interacción del usuario con el dominio. Sin embargo, se debe tener cuidado para asegurarse de que los usuarios no se sorprendan con el contenido de reproducción automática.

Ejemplo 4: MyMovieReviewBlog.com incrusta un iframe con un avance de película para acompañar su revisión. El usuario interactuó con el dominio para llegar al blog específico, por lo que se permite la reproducción automática.Sin embargo, el blog debe delegar explícitamente ese privilegio en el iframe para que el contenido se reproduzca automáticamente.

Políticas empresariales de Chrome

Es posible cambiar este nuevo comportamiento de reproducción automática con las políticas empresariales de Chrome para casos de uso como quioscos o sistemas desatendidos. Consulte la página de ayuda Configurar políticas y configuraciones para obtener información sobre cómo establecer estas nuevas políticas empresariales relacionadas con la reproducción automática:

• La política “AutoplayAllowed” controla si la reproducción automática está permitida o no.
• La política “AutoplayWhitelist” le permite especificar una lista blanca de patrones de URL donde la reproducción automática siempre estará habilitada.

Mejores prácticas para desarrolladores web

Elementos de audio / video

Aquí hay una cosa para recordar: Nunca supongas que se reproducirá un video, y no muestres un botón de pausa cuando el video no se está reproduciendo. Es tan importante que voy a escribirlo una vez más a continuación para aquellos que simplemente hojean esa publicación.

Siempre debe mirar la Promesa devuelta por la función de reproducción para ver si fue rechazada :

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 involucrar a los usuarios consiste en utilizar la reproducción automática silenciada y dejar que decidan activar el silencio (vea el fragmento de código a continuación). Algunos sitios web ya lo hacen de manera efectiva, incluidos Facebook, Instagram, Twitter y YouTube.

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

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

Web Audio

En primer lugar, recuerde que es una buena práctica esperar a que el usuario interactúe antes de iniciar la reproducción de audio, ya que el usuario es consciente de que algo está sucediendo. Piense en un botón de “reproducción” o en un interruptor de “encendido / apagado”, por ejemplo. También puede simplemente agregar un botón “desactivar el silencio” dependiendo del flujo de la aplicación.

Si crea su AudioContext en la carga de la página, tendrá que llamar a resume() en algún momento después de que el usuario interactuó con la página (por ejemplo, el usuario hizo clic en un botón).

// 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 puede crear 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 requerirá la interacción del usuario para reproducir audio, puede verificar el statedel AudioContext después de haberlo creado. Si se le permite jugar, inmediatamente debe comenzar a running . De lo contrario, se suspended . Si escucha el evento statechange , puede detectar cambios de forma asincrónica.

Para obtener información, revise la pequeña solicitud de extracción que corrige la reproducción de Web Audio debido a estos cambios en la política de reproducción automática para https://airhorner.com .

De forma predeterminada, la API de audio web no está actualmente afectada por la política de reproducción automática. Para habilitar la política de reproducción automática para Web Audio, inicie Chrome con el siguienteinterruptor interno : chrome.exe --disable-features=AutoplayIgnoreWebAudio