W3docs
it
Accedi

Attributo HTML autoplay

L'attributo HTML autoplay avvia automaticamente la riproduzione di audio o video. Scopri come usarlo sugli elementi <audio> e <video>.

L'attributo HTML autoplay è un attributo boolean che indica al browser di avviare automaticamente la riproduzione dell'audio o del video non appena possibile, senza interrompere il caricamento.

Puoi usare questo attributo sui seguenti elementi: <audio> e <video>.

Poiché autoplay è un attributo boolean, la sua sola presenza significa "attivo". Non è necessario assegnargli un valore — autoplay e autoplay="" sono equivalenti, e scrivere qualcosa come autoplay="false" non lo disattiva. Per disabilitare l'autoplay, è necessario rimuovere completamente l'attributo.

Sintassi

<tag autoplay>&lt;/tag&gt;

Perché i browser bloccano l'autoplay

In pratica, aggiungere semplicemente autoplay spesso non è sufficiente — i browser moderni possono rifiutare silenziosamente l'avvio della riproduzione. Si tratta di una scelta intenzionale. Le pagine che producono suoni nel momento in cui vengono caricate sono notoriamente una pessima esperienza, quindi i browser applicano ora delle politiche di autoplay:

  • L'autoplay con audio disattivato è consentito. I media privi di audio (o con l'audio disattivato) possono essere riprodotti automaticamente al caricamento della pagina, poiché non disturbano l'utente.
  • L'autoplay con audio è limitato. Per riprodurre automaticamente con il suono, il browser di solito richiede un segnale di intenzione o di interesse dell'utente, ad esempio:
    • un gesto dell'utente sulla pagina (un clic o un tocco) prima che la riproduzione venga richiesta, oppure
    • in Chrome, un elevato Media Engagement Index — un punteggio per sito che Chrome mantiene in base alla frequenza con cui l'utente ha precedentemente riprodotto media su quel sito.
  • Safari è restrittivo per impostazione predefinita. Safari blocca l'autoplay con audio sulla maggior parte dei siti e consente agli utenti di disabilitare l'autoplay per ogni sito nelle impostazioni. L'autoplay con audio disattivato continua a funzionare.

La conclusione è: per un autoplay affidabile, il media deve essere senza audio. Aggiungi l'attributo muted insieme a autoplay (guarda come funziona nella pagina <video>).

Nota: <audio autoplay> da solo (l'audio non è mai disattivato per impostazione predefinita) verrà bloccato dai browser moderni. Un <video autoplay muted> verrà riprodotto. Per l'autoplay dell'audio, disattiva prima il suono o avvialo da un'interazione dell'utente.

<!-- Plays automatically: video, muted -->
<video autoplay muted src="movie.mp4"></video>

<!-- Usually BLOCKED: audio always has sound -->
<audio autoplay src="song.mp3"></audio>

<!-- Plays automatically: muted audio (silent, but it plays) -->
<audio autoplay muted src="song.mp3"></audio>

Esempio dell'attributo HTML autoplay usato sull'elemento <audio>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls autoplay>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>
Provalo tu stesso »

Esempio dell'attributo HTML autoplay usato sull'elemento <video>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>
Provalo tu stesso »

Avvio della riproduzione con JavaScript

A volte è necessario avviare la riproduzione dal codice invece di usare l'attributo autoplay — ad esempio, dopo che l'utente fa clic su un pulsante personalizzato. La chiamata a element.play() restituisce una Promise che si risolve quando la riproduzione inizia e viene rifiutata se il browser la blocca (nella maggior parte dei casi perché il media ha audio e non c'è stato alcun gesto dell'utente).

Gestisci sempre il rifiuto in modo che un autoplay bloccato non generi un errore non intercettato. Un approccio comune è ricorrere alla riproduzione silenziosa:

<video id="clip" muted src="movie.mp4"></video>

<script>
  const video = document.getElementById("clip");

  const promise = video.play();

  if (promise !== undefined) {
    promise
      .then(() => {
        // Autoplay started successfully.
      })
      .catch((error) => {
        // Autoplay was prevented. Mute the video and try again,
        // or show a play button so the user can start it.
        video.muted = true;
        video.play();
      });
  }
</script>

Accessibilità e UX

I media riprodotti automaticamente — specialmente con audio — possono disorientare e risultare intrusivi. Secondo le WCAG 1.4.2 (Controllo dell'audio), qualsiasi audio che viene riprodotto automaticamente per più di 3 secondi deve offrire un modo per metterlo in pausa, fermarlo o silenziarlo indipendentemente dal volume di sistema. L'approccio più sicuro è:

  • Preferire l'autoplay con audio disattivato e consentire agli utenti di riattivare il suono su richiesta.
  • Fornire sempre controls in modo che l'utente possa interrompere la riproduzione.
  • Evitare la riproduzione automatica di contenuti audio a meno che l'utente non lo abbia esplicitamente richiesto.

Esercitazione

Pratica
Quale affermazione sull'attributo HTML 'autoplay' è corretta?
Quale affermazione sull'attributo HTML 'autoplay' è corretta?

Argomenti correlati sui media

Was this page helpful?