La riproduzione automatica con audio disattivato per i video è supportata da Chrome per Android a partire dalla versione 53. La riproduzione di un elemento video inizierà automaticamente quando diventa visibile se sono impostati sia autoplay sia muted e 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 di disattivazione dell'audio.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Per vedere come funziona, consulta questo esempio. La riproduzione del video muted inizia automaticamente in Chrome 53 o versioni successive.
Inoltre, ora è possibile avviare la riproduzione con audio disattivato 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 in modo programmatico in risposta a un gesto dell'utente, ad esempio click, ma se si tenta di riattivare l'audio di un video in modo programmatico senza un gesto dell'utente, la riproduzione verrà messa in pausa.
La modifica di muted autoplay consentirà anche di utilizzare play() con un elemento video non creato nel DOM, ad esempio per guidare la riproduzione WebGL.
Il metodo play() restituisce anche una promessa, che può essere utilizzata per verificare se la riproduzione programmatica con audio disattivato è attivata. Un esempio è disponibile 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, richiedere molti dati e non piace a molti utenti.
La disattivazione della riproduzione automatica ha avuto l'effetto indesiderato di spingere gli sviluppatori ad alternative come le GIF animate, nonché ad hack di <canvas> e <img>. Queste tecniche sono molto peggiori dei video ottimizzati in termini di consumo energetico, prestazioni, requisiti di larghezza di banda, costo dei dati e utilizzo della memoria. I video possono offrire una qualità superiore rispetto alle GIF animate, con una compressione molto migliore: in media circa 10 volte e fino a 100 volte al massimo. La decodifica video in JavaScript è possibile, ma consuma molta batteria.
Confronta quanto segue. Il primo è un video e il secondo è una GIF animata:
Sono molto simili, ma il video ha una dimensione inferiore a 200 KB e la GIF animata supera i 900 KB.
Chrome e altri fornitori di browser sono estremamente cauti riguardo alla larghezza di banda degli utenti. Per molti utenti in molti contesti, il costo elevato dei dati è spesso un ostacolo maggiore all'accesso rispetto alla scarsa connettività. Data la prevalenza di soluzioni alternative, la riproduzione automatica con audio disattivato non può essere bloccata, quindi offrire API e impostazioni predefinite di buona qualità è il massimo che la piattaforma può fare.
Il web è sempre più incentrato sui media. Designer e sviluppatori continuano a trovare nuovi e imprevisti modi di 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 consente funzionalità come questa sia su dispositivi mobili che su computer.
I dettagli più minuti
- Dal punto di vista dell'accessibilità, la riproduzione automatica può essere particolarmente problematica. Chrome 53 e versioni successive su Android forniscono un'impostazione per disattivare completamente la riproduzione automatica: da Impostazioni 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 con audio disattivato non ha molto senso per l'audio. - Se è attiva la modalità Risparmio dati, la riproduzione automatica non è disponibile. Se la modalità Risparmio dati è attiva, la riproduzione automatica viene disattivata nelle impostazioni dei contenuti multimediali.
- La riproduzione automatica con audio disattivato funzionerà per qualsiasi elemento video visibile in qualsiasi documento visibile, iframe o altro.
- Ricorda che per usufruire del nuovo comportamento, dovrai aggiungere
mutedeautoplay: 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 audio disattivato o meno, è già supportata su Android da Firefox e dal browser UC: non bloccano alcun tipo di riproduzione automatica.