Riproduzione automatica disattivata sui dispositivi mobili: puoi dire addio ai trucchi su tela e alle GIF animate

La riproduzione automatica con audio disattivato dei video è supportata da Chrome per Android a partire dalla versione 53. La riproduzione di un elemento video si avvia automaticamente quando viene visualizzato se sono impostati autoplay e muted, mentre la riproduzione dei video con audio disattivato può essere avviata pragmaticamente con play(). In precedenza, la riproduzione sui dispositivi mobili doveva essere avviata da un gesto dell'utente, indipendentemente dallo stato disattivato.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Puoi vedere come funziona visitando questo esempio. La riproduzione del video muted inizia automaticamente in Chrome 53 o versioni successive.

Screenshot del video player.

Inoltre, ora è possibile avviare la riproduzione con audio disattivato con il metodo play(). In precedenza, play() avviava la riproduzione solo se proveniva da un gesto dell'utente, ad esempio il clic su un pulsante. Confronta le due demo seguenti su Android. Provale su Chrome 53, quindi su una versione precedente:

Ti consigliamo di utilizzare l'attributo autoplay quando possibile e il metodo play() solo se necessario.

È possibile riattivare l'audio di un video in modo programmatico in risposta a un gesto dell'utente, ad esempio click. Tuttavia, se provi a riattivare l'audio di un video in modo programmatico senza un gesto dell'utente, la riproduzione verrà messa in pausa.

La modifica a muted autoplay consentirà anche di usare play() con un elemento video non creato nel DOM, ad esempio per avviare la riproduzione WebGL.

Il metodo play() restituisce inoltre una promessa, che può essere utilizzata per verificare se la riproduzione programmatica con audio disattivato è abilitata. Puoi trovare un esempio all'indirizzo simpl.info/video/scripted.

Perché questa modifica?

La riproduzione automatica è stata disattivata nelle versioni precedenti di Chrome su Android perché può essere fastidiosa, avere fame di dati e non piace a molti utenti.

La disattivazione della riproduzione automatica ha avuto l'effetto indesiderato di indirizzare gli sviluppatori verso alternative come le GIF animate e i hack <canvas> e <img>. Queste tecniche sono molto peggiori rispetto ai video ottimizzati in termini di consumo energetico, prestazioni, requisiti di larghezza di banda, costo dei dati e utilizzo della memoria. I video possono fornire una qualità superiore rispetto alle GIF animate, con una compressione di gran lunga migliore: circa 10 volte in media e fino a 100 volte al massimo. La decodifica video in JavaScript è possibile, ma consuma molto batteria.

Confronta quanto segue: il primo è un video e il secondo è una GIF animata:

Video del clip in riproduzione.

Hanno un aspetto molto simile, ma le dimensioni del video sono inferiori a 200 kB e la GIF animata supera i 900 kB.

Chrome e altri fornitori di browser prestano molta attenzione alla larghezza di banda degli utenti. Per molti utenti in molti contesti, un costo dei dati elevato costituisce spesso un ostacolo all'accesso maggiore rispetto a una scarsa connettività. Data la prevalenza di soluzioni alternative, la riproduzione automatica con audio disattivato non è un elemento che può essere bloccato, quindi offrire API e impostazioni predefinite di qualità è il meglio che la piattaforma possa fare.

Il Web è sempre più incentrato sui media. I designer e gli sviluppatori continuano a trovare modi nuovi e imprevisti per utilizzare i video e vogliono un comportamento coerente su tutte le piattaforme, ad esempio quando utilizzano i video in background come elemento di design. La riproduzione automatica con audio disattivato attiva funzionalità come questa sia su dispositivi mobili che su computer.

Informazioni più dettagliate

  • Dal punto di vista dell'accessibilità, la riproduzione automatica può essere particolarmente problematica. In Chrome 53 e versioni successive su Android è disponibile un'impostazione per disattivare completamente la riproduzione automatica: nelle impostazioni Contenuti multimediali, seleziona Riproduzione automatica.
  • Questa modifica non influisce sull'elemento audio: la riproduzione automatica è ancora disattivata su Chrome su Android, perché la riproduzione automatica con audio disattivato non ha molto senso per l'audio.
  • Se è attiva la modalità Risparmio dati, la riproduzione automatica non avviene. Se è attiva la modalità Risparmio dati, la riproduzione automatica è disattivata nelle impostazioni Contenuti multimediali.
  • La riproduzione automatica con audio disattivato funzionerà per tutti gli elementi video visibili in documenti visibili, iframe o altri elementi.
  • Ricorda che per usufruire del nuovo comportamento, dovrai aggiungere muted e autoplay: confronta simpl.info/video con simpl.info/video/muted.

Assistenza

  • La riproduzione automatica con audio disattivato è supportata da Safari su iOS 10 e versioni successive.
  • La riproduzione automatica, con o senza audio, è già supportata su Android da Firefox e dal browser UC: non blocca alcun tipo di riproduzione automatica.

Scopri di più