Criterio di riproduzione automatica in Chrome

Esperienza utente migliorata, incentivi ridotti al minimo per l'installazione di blocchi degli annunci e consumo di dati ridotto

Le norme relative alla riproduzione automatica di Chrome sono cambiate ad aprile 2018 e sono qui per spiegarti perché e in che modo ciò influisce sulla riproduzione di video con audio. Spoiler: gli utenti lo adoreranno.

Nuovi comportamenti

Come avrai notato, i browser web stanno passando a norme di riproduzione automatica più severe per migliorare l'esperienza utente, ridurre al minimo gli incentivi all'installazione di blocchi degli annunci e ridurre il consumo di dati su reti costose e/o limitate. Lo scopo di queste modifiche è fornire agli utenti un maggiore controllo sulla riproduzione e aiutare gli editori a casi d'uso legittimi.

Le norme relative alla riproduzione automatica di Chrome sono semplici:

• La riproduzione automatica con audio disattivato è sempre consentita.
• La riproduzione automatica con audio è consentita se:
  • L'utente ha interagito con il dominio (clic, tocco e così via).
  • Sui computer, la soglia dell'Indice di coinvolgimento dei contenuti multimediali dell'utente è stata superata, il che significa che l'utente ha precedentemente riprodotto video con audio.
  • L'utente ha aggiunto il sito alla schermata Home su dispositivo mobile o installato la PWA su computer.
• I frame principali possono delegare l'autorizzazione di riproduzione automatica ai propri iframe per consentire la riproduzione automatica con audio.

Indice di coinvolgimento dei media

Il Media Engagement Index (MEI) misura la propensione di un individuo a consumare contenuti multimediali su un sito. L'approccio di Chrome è dato dal rapporto tra visite ed eventi significativi di riproduzione dei contenuti multimediali per origine:

• La fruizione dei contenuti multimediali (audio/video) deve essere superiore a sette secondi.
• L'audio deve essere presente e deve essere riattivato.
• La scheda con il video è attiva.
• Le dimensioni del video (in px) devono essere maggiori di 200 x 140.

Da qui, Chrome calcola il punteggio del coinvolgimento dei media, che è il più alto sui siti in cui i contenuti multimediali vengono riprodotti regolarmente. Se il valore è sufficientemente alto, la riproduzione automatica dei contenuti multimediali è consentita solo su computer.

Le MEI di un utente sono disponibili nella pagina interna di about://media-engagement.

Opzioni per sviluppatori

In qualità di sviluppatore, potresti modificare a livello locale il comportamento dei criteri di riproduzione automatica di Chrome per testare il tuo sito web in base ai diversi livelli di coinvolgimento degli utenti.

• Puoi disattivare completamente il criterio di riproduzione automatica utilizzando un flag della riga di comando: chrome.exe --autoplay-policy=no-user-gesture-required. In questo modo puoi testare il tuo sito web come se l'utente avesse un forte coinvolgimento con il sito e la riproduzione automatica sarebbe sempre consentita.

• Puoi anche decidere di fare in modo che la riproduzione automatica non sia mai consentita disattivando gli indicatori MEI e se i siti con il valore MEI complessivo più elevato ricevono la riproduzione automatica per impostazione predefinita per i nuovi utenti. Utilizza i flag: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Delega iframe

Un criterio di autorizzazione consente agli sviluppatori di attivare e disattivare in modo selettivo le funzionalità e le API del browser. Una volta che un'origine ha ricevuto l'autorizzazione di riproduzione automatica, può delegarla ad iframe multiorigine con i criteri di autorizzazione per la riproduzione automatica. Tieni presente che la riproduzione automatica è consentita per impostazione predefinita su iframe della stessa origine.

<!-- 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">

Se il criterio di autorizzazione per la riproduzione automatica è disattivato, le chiamate a play() senza un gesto dell'utente rifiutano la promessa con un'eccezione DOMNotAllowedError. Inoltre, verrà ignorato anche l'attributo di riproduzione automatica.

Esempi

Esempio 1: ogni volta che un utente visita VideoSubscriptionSite.com sul proprio laptop, guarda un programma TV o un film. Poiché il punteggio del coinvolgimento dei media è alto, la riproduzione automatica è consentita.

Esempio 2: GlobalNewsSite.com include sia contenuti di testo che video. La maggior parte degli utenti visita il sito per trovare contenuti testuali e guarda video solo occasionalmente. Il punteggio del coinvolgimento dei media degli utenti è basso, quindi la riproduzione automatica non è consentita se un utente naviga direttamente da una pagina di social media o da una ricerca.

Esempio 3: LocalNewsSite.com include sia contenuti di testo che video. La maggior parte delle persone accede al sito tramite la home page e poi fa clic sugli articoli. La riproduzione automatica sulle pagine degli articoli sarebbe consentita a causa dell'interazione dell'utente con il dominio. Occorre però fare in modo che gli utenti non siano sorpresi dalla riproduzione automatica dei contenuti.

Esempio 4: MyMovieReviewBlog.com incorpora un iframe con il trailer di un film per aggiungere una recensione. Gli utenti hanno interagito con il dominio per accedere al blog, pertanto la riproduzione automatica è consentita. Tuttavia, il blog deve delegare esplicitamente questo privilegio all'iframe affinché i contenuti vengano riprodotti automaticamente.

Criteri di Chrome Enterprise

È possibile modificare il comportamento della riproduzione automatica con i criteri aziendali di Chrome per casi d'uso come kiosk o sistemi automatici. Consulta la pagina di assistenza dell'elenco dei criteri per scoprire come impostare le norme aziendali relative alla riproduzione automatica:

• Il criterio AutoplayAllowed consente di stabilire se la riproduzione automatica è consentita o meno.
• Il criterio AutoplayAllowlist consente di specificare una lista consentita di pattern URL in cui la riproduzione automatica sarà sempre attiva.

Best practice per gli sviluppatori web

Elementi audio/video

Ricorda: non dare mai per scontato che un video venga riprodotto e non mostrare il pulsante di pausa quando il video non è in riproduzione. È così importante che lo scriverò ancora una volta qui sotto per coloro che si limiteranno a scorrere il post.

Devi sempre controllare la promessa restituita dalla funzione di riproduzione per verificare se è stata rifiutata:

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.
  });
}

Un ottimo modo per coinvolgere gli utenti è utilizzare la riproduzione automatica con audio disattivato e lasciare che scelgano di riattivarlo. Vedi l'esempio di seguito. Alcuni siti web lo fanno già in modo efficace, tra cui Facebook, Instagram, Twitter e YouTube.

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

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

Gli eventi che attivano l'attivazione dell'utente devono essere definiti in modo coerente in tutti i browser. Per il momento ti consiglio di continuare a utilizzare "click". Consulta la pagina Problema di GitHub whatwg/html#3849.

Audio per il web

L'API Web Audio è coperta dalla riproduzione automatica a partire da Chrome 71. Ci sono alcune cose da sapere a riguardo. In primo luogo, è buona norma attendere l'interazione dell'utente prima di avviare la riproduzione audio, in modo che gli utenti siano a conoscenza che sta succedendo qualcosa. Pensa ad esempio a un pulsante di riproduzione o a un interruttore di accensione e spegnimento. Puoi anche aggiungere un pulsante "Riattiva audio" in base al flusso dell'app.

Se crei AudioContext al caricamento della pagina, dovrai chiamare resume() in un momento successivo all'interazione dell'utente con la pagina, ad esempio dopo che l'utente ha fatto clic su un pulsante. In alternativa, AudioContext verrà ripreso dopo un gesto dell'utente se start() viene chiamato su un nodo collegato.

// 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');
  });
});

Puoi anche creare AudioContext solo quando l'utente interagisce con la pagina.

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

Per rilevare se il browser richiede un'interazione da parte dell'utente per riprodurre l'audio, controlla AudioContext.state dopo averlo creato. Se la riproduzione è consentita, dovrebbe passare immediatamente a running. In caso contrario sarà suspended. Se ascolti l'evento statechange, puoi rilevare le modifiche in modo asincrono.

Per un esempio, dai un'occhiata alla piccola Richiesta di pull che corregge la riproduzione dell'audio sul web per queste regole dei criteri di riproduzione automatica per https://airhorner.com.