Attributo controls in HTML

L'attributo HTML controls è un attributo boolean che indica al browser di mostrare i controlli di riproduzione integrati per un elemento <audio> o <video>. È stato introdotto in HTML5.

Perché l'attributo controls è importante

Per impostazione predefinita, gli elementi <audio> e <video> non mostrano alcuna interfaccia visibile. Un elemento <audio> senza controls è completamente invisibile nella pagina, mentre un elemento <video> senza di esso mostra solo il primo fotogramma (o un riquadro nero) senza alcun modo per avviare la riproduzione.

Aggiungere controls fornisce agli utenti un modo per riprodurre, mettere in pausa, scorrere e regolare il volume — e consente agli utenti di tastiera e screen reader di interagire con il media. A meno che non si stia costruendo un player JavaScript personalizzato con controlli accessibili propri, è quasi sempre opportuno includere controls. Ometterlo senza una sostituzione rappresenta sia un problema di usabilità che di accessibilità.

Quali controlli vengono mostrati

Per l'elemento <audio>, i controlli del browser in genere forniscono:

Play / Pausa
Barra di avanzamento (scrubbing)
Tempo corrente / durata
Volume / silenziamento

Per l'elemento <video>, in genere forniscono:

Play / Pausa
Barra di avanzamento (scrubbing)
Tempo corrente / durata
Volume / silenziamento
Attivazione schermo intero
Sottotitoli / didascalie (quando è presente un <track> con kind="captions" o kind="subtitles")
Picture-in-Picture / download / "riproduci su un altro dispositivo" (dipende dal browser)

L'insieme esatto dei controlli — e il loro aspetto — non è standardizzato. Chrome, Firefox, Safari, Edge e i browser mobile mostrano ognuno la propria interfaccia nativa, e alcuni controlli (come i sottotitoli o il download) compaiono solo quando sono pertinenti. Considera l'aspetto come un dettaglio del browser che non controlli completamente.

Sintassi

controls è boolean: la sua semplice presenza abilita i controlli. Il valore non è rilevante, quindi controls, controls="" e controls="controls" sono tutti equivalenti. Per ometterlo, basta non inserire l'attributo.

<audio controls></audio>

Esempio: controls sull'elemento `<audio>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button to hear the clip.</p>
  </body>
</html>

Provalo tu stesso »

Il testo all'interno dell'elemento ("Your browser does not support…") è un contenuto di riserva per i browser molto datati. Sostituisci src con il percorso del tuo file audio o con qualsiasi URL audio HTTPS raggiungibile.

Esempio: controls sull'elemento `<video>`

Qui più elementi <source> consentono al browser di scegliere il primo formato che è in grado di riprodurre. Sostituisci con i tuoi file o un URL HTTPS stabile.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Provalo tu stesso »

Rimuovere controlli specifici con controlslist

Quando si vogliono mantenere la maggior parte dei controlli nativi ma nasconderne uno o due, i browser basati su Chromium (Chrome, Edge, Opera) supportano l'attributo correlato controlslist. Accetta un elenco di token separati da spazi che disabilitano singoli controlli:

nodownload — nasconde il pulsante di download
nofullscreen — nasconde il pulsante per lo schermo intero (video)
noremoteplayback — nasconde il pulsante "riproduci su un altro dispositivo" / casting

<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist non fa parte di uno standard definitivo ed è attualmente una funzionalità di Chromium, quindi Firefox e Safari la ignorano. Nasconde solo gli elementi dell'interfaccia — non è un meccanismo di sicurezza o DRM, e un utente determinato può comunque accedere al media.

controls con autoplay e muted

Se si combina controls con autoplay, la maggior parte dei browser bloccherà l'autoplay con audio. Aggiungi l'attributo muted in modo che il media possa avviarsi, e l'utente potrà riattivare l'audio tramite i controlli:

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

Argomenti correlati

Esercitazione

Pratica

A cosa serve l'attributo HTML 'controls'?

Serve per controllare il comportamento di una tabella HTML.Serve per offrire controlli aggiuntivi in un elemento di testo.Serve per aggiungere controlli multimediali predefiniti a un elemento audio o video.Serve per manipolare le immagini in un documento HTML.