Esperienza utente migliorata, incentivi ridotti per l'installazione di blocchi degli annunci e consumo di dati ridotto
Le norme di Chrome relative alla riproduzione automatica sono cambiate ad aprile 2018 e sono qui per spiegarvi perché e in che modo influiscono sulla riproduzione di video con audio. Spoiler: gli utenti la adoreranno
Nuovi comportamenti
Come potresti aver notato, i browser web stanno adottando criteri più rigidi per la riproduzione automatica 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 è offrire agli utenti un maggiore controllo sulla riproduzione e offrire ai publisher casi d'uso legittimi.
I criteri di 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).
- Su computer, la soglia dell'indice di coinvolgimento multimediale dell'utente è stata superata, il che significa che in precedenza l'utente ha riprodotto il 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 nei media
Il Media Engagement Index (MEI) misura la propensione di un individuo a consumare contenuti multimediali su un sito. L'approccio di Chrome è un rapporto tra le visite a eventi di riproduzione dei contenuti multimediali significativi per origine:
- La fruizione dei contenuti multimediali (audio/video) deve durare più di sette secondi.
- L'audio deve essere presente e riattivato.
- La scheda con il video è attiva.
- Le dimensioni del video (in px) devono essere superiori a 200 x 140.
A partire da questo valore, Chrome calcola il punteggio del coinvolgimento sui media, che è il più alto sui siti in cui i contenuti multimediali vengono riprodotti regolarmente. Quando è sufficientemente alta, i contenuti multimediali possono essere riprodotti automaticamente solo su computer.
La metrica MEI di un utente è disponibile nella pagina interna di about://media-engagement
.
Trasferimenti 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 per 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 coinvolgimento elevato con il tuo sito e la riproduzione automatica sarebbe sempre consentita.Puoi anche decidere di fare in modo che la riproduzione automatica non sia mai consentita disattivando la metrica MEI e se i siti con questo tipo di MEI complessive ricevono la riproduzione automatica per impostazione predefinita per i nuovi utenti. Esegui questa operazione con i flag:
chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies
.
Delega iframe
Un criterio di autorizzazione consente agli sviluppatori di attivare e disattivare selettivamente le funzionalità e le API del browser. Una volta che un'origine ha ricevuto l'autorizzazione di riproduzione automatica, può delegarla a iframe multiorigine con le norme sulle autorizzazioni 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 autorizzazioni per la riproduzione automatica viene disattivato, le chiamate al numero play()
senza
un gesto dell'utente rifiuteranno la promessa con una DOMException NotAllowedError
. Inoltre,
verrà ignorato anche l'attributo {/4}
Esempi
Esempio 1: ogni volta che un utente visita VideoSubscriptionSite.com
sul proprio
laptop, guarda un programma TV o un film. Il punteggio di coinvolgimento sui media
è alto, pertanto la riproduzione automatica è consentita.
Esempio 2: GlobalNewsSite.com
include sia contenuti di testo che contenuti video.
La maggior parte degli utenti visita il sito per trovare contenuti testuali e guarda video solo occasionalmente.
Il punteggio del coinvolgimento sui media degli utenti è basso, quindi la riproduzione automatica non sarebbe 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 contenuti video.
La maggior parte delle persone accede al sito tramite la home page e poi fa clic sugli articoli
di notizie. La riproduzione automatica sulle pagine degli articoli di notizie sarebbe consentita a causa dell'interazione dell'utente con il dominio. Tuttavia, fai attenzione ad assicurarti che gli utenti
non siano sorpresi dalla riproduzione automatica dei contenuti.
Esempio 4: MyMovieReviewBlog.com
incorpora un iframe con il trailer di un film da
accompagnare a una recensione. Gli utenti hanno interagito con il dominio per accedere al blog, quindi
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 Elenco dei criteri per scoprire come impostare le norme aziendali correlate 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 sviluppatori web
Elementi audio/video
Una cosa da ricordare: non dare mai il presupposto che un video venga riprodotto e non mostrare un pulsante di pausa quando il video non è effettivamente in riproduzione. È così importante che lo riscriverò ancora una volta qui sotto per coloro che semplicemente scorrono il post.
Dovresti sempre controllare il valore Promise restituito dalla funzione di riproduzione per vedere se è stato rifiutato:
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 consentire loro di attivare l'audio. (vedi l'esempio di seguito). Alcuni siti web già lo fanno 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 degli utenti devono ancora essere definiti in modo coerente in tutti i browser. Per il momento ti consiglio di attenerti a "click"
. Consulta la pagina
GitHub issue whatwg/html#3849.
Audio sul web
L'API Web Audio è coperta dalla riproduzione automatica dalla versione 71 di Chrome. Ci sono alcune cose da sapere a riguardo. Innanzitutto, è buona norma attendere l'interazione di un utente prima di avviare la riproduzione audio, in modo che gli utenti siano a conoscenza di qualcosa che sta accadendo. Ad esempio, puoi usare un pulsante di riproduzione o attivazione/disattivazione. Puoi anche aggiungere un pulsante per riattivare l'audio, a seconda del flusso dell'app.
Se crei la tua AudioContext
al caricamento pagina, dovrai chiamare resume()
in un determinato momento dopo che l'utente ha interagito con la pagina (ad es. dopo che un utente fa clic
su un pulsante). In alternativa, AudioContext
verrà ripreso dopo un gesto
dell'utente se start()
viene chiamato su qualsiasi 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 dell'utente per riprodurre l'audio, controlla
AudioContext.state
dopo averlo creato. Se la riproduzione è consentita, dovrebbe
passare immediatamente alla modalità running
. In caso contrario, sarà suspended
. Se ascolti
l'evento statechange
, puoi rilevare le modifiche in modo asincrono.
Per un esempio, controlla la piccola richiesta pull che corregge la riproduzione dell'audio sul web per queste regole delle norme relative alla riproduzione automatica per https://airhorner.com.