La riproduzione automatica silenziata dei video è supportata da Chrome per Android a partire dalla versione 53. La riproduzione di un elemento video inizierà automaticamente una volta visualizzato se sono impostati sia autoplay che muted e la riproduzione dei video con audio disattivato può essere avviata in modo programmatico con play(). In precedenza, la riproduzione sui dispositivi mobili doveva essere avviata da un gesto dell'utente, indipendentemente dallo stato di disattivazione dell'audio.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Puoi vedere questo in azione visitando questo esempio. La riproduzione del video muted inizia automaticamente in Chrome 53 o versioni successive.
Inoltre, ora la riproduzione silenziata può essere avviata utilizzando il metodo play(). In precedenza, play() avviava la riproduzione solo se proveniva da un gesto dell'utente, ad esempio un clic sul pulsante. Confronta le due demo seguenti su Android. Provale su Chrome 53 e poi su una versione precedente:
Ti consigliamo di utilizzare l'attributo autoplay, se possibile, e il metodo play() solo se necessario.
È possibile riattivare l'audio di un video a livello di programmazione in risposta a un gesto dell'utente, ad esempio un click, ma se tenti di riattivare l'audio di un video a livello di programmazione senza un gesto dell'utente, la riproduzione verrà interrotta.
La modifica di muted autoplay consentirà inoltre di utilizzare play() con un elemento video non creato nel DOM, ad esempio per attivare la riproduzione WebGL.
Il metodo play() restituisce anche 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 invadente, consuma molti dati e non piace a molti utenti.
La disattivazione della riproduzione automatica ha avuto l'effetto indesiderato di spingere gli sviluppatori a utilizzare alternative come le GIF animate, nonché hack <canvas> e <img>. Queste tecniche sono molto peggiori rispetto al video ottimizzato in termini di consumo energetico, prestazioni, requisiti di larghezza di banda, costi dei dati e utilizzo della memoria. Il video può fornire una qualità superiore rispetto alle GIF animate, con una compressione di gran lunga migliore: in media circa 10 volte e al massimo 100 volte. La decodifica video in JavaScript è possibile, ma consuma molta batteria.
Confronta i seguenti elementi: il primo è un video e il secondo è una GIF animata:
Sembrano molto simili, ma il video ha dimensioni inferiori a 200 KB, mentre la GIF animata supera i 900 KB.
Chrome e altri fornitori di browser sono estremamente cauti per quanto riguarda la larghezza di banda degli utenti. Per molti utenti in molti contesti, il costo elevato dei dati è spesso un ostacolo all'accesso maggiore rispetto alla scarsa connettività. Data la prevalenza di soluzioni alternative, la riproduzione automatica disattivata non può essere bloccata, quindi offrire API e impostazioni predefinite valide è il meglio che la piattaforma possa fare.
Il web è sempre più incentrato sui contenuti multimediali. Progettisti e sviluppatori continuano a trovare modi nuovi e imprevisti di utilizzare i video e vogliono un comportamento coerente tra le piattaforme, ad esempio quando utilizzano i video in background come elemento di design. La riproduzione automatica silenziata consente di utilizzare funzionalità come questa sia su dispositivi mobili che su computer.
Dettagli
- Dal punto di vista dell'accessibilità, la riproduzione automatica può essere particolarmente problematica. Chrome 53 e versioni successive su Android offrono un'impostazione per disattivare completamente la riproduzione automatica: nelle impostazioni dei contenuti multimediali, seleziona Riproduzione automatica.
- Questa modifica non influisce sull'elemento
audio: la riproduzione automatica è ancora disattivata su Chrome per Android, perché la riproduzione automatica disattivata non ha molto senso per l'audio. - La riproduzione automatica non è disponibile se è attiva la modalità Risparmio dati. Se la modalità Risparmio dati è attiva, la riproduzione automatica è disattivata nelle impostazioni dei contenuti multimediali.
- La riproduzione automatica silenziata funziona per qualsiasi elemento video visibile in qualsiasi documento, iframe o altro.
- Ricorda che, per sfruttare il nuovo comportamento, devi aggiungere
mutedeautoplay: confronta simpl.info/video con simpl.info/video/muted.
Assistenza
- La riproduzione automatica silenziata è supportata da Safari su iOS 10 e versioni successive.
- La riproduzione automatica, con o senza audio, è già supportata su Android da Firefox e UC Browser, che non bloccano alcun tipo di riproduzione automatica.