Tag HTML <video>

Il tag <video> è uno degli elementi HTML5. Viene utilizzato per incorporare un lettore video in un documento HTML. Questa pagina illustra come aggiungere un video, fornire più formati per la compatibilità cross-browser, aggiungere didascalie per l'accessibilità e i comportamenti da tenere a mente per autoplay, gli attributi poster, preload e loop.

Esistono 3 formati video ampiamente supportati per l'elemento <video>: MP4/MPEG-4, WebM e Ogg. Poiché nessun singolo formato funziona in tutti i browser, di solito si forniscono più file usando elementi <source> annidati (oppure un singolo attributo src). I file video di grandi dimensioni vengono compressi e decompressi tramite codec:

MP4/MPEG-4 — video H.264 con audio AAC. Il formato più compatibile.
WebM — video VP8 o VP9 con audio Vorbis o Opus.
Ogg — video Theora con audio Vorbis.

L'elemento <video> è un elemento sostituito con display: block predefinito. Per controllare come viene riempito il fotogramma, utilizza le proprietà CSS object-fit e object-position. Per monitorare il progresso del download e della riproduzione, utilizza gli attributi di evento multimediali.

È possibile aggiungere sottotitoli o didascalie con l'elemento <track> e il formato WebVTT (trattato di seguito). Lo stesso elemento può riprodurre anche file solo audio, sebbene <audio> sia la scelta migliore per i contenuti esclusivamente sonori.

Sintassi

Il tag <video> è un elemento a coppia. Il contenuto viene scritto tra il tag di apertura (<video>) e il tag di chiusura (</video>).

Esempio del tag HTML `<video>` con gli attributi controls, muted e src:

Esempio del tag HTML <video>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Provalo tu stesso »

Sorgenti multiple e testo di fallback

Quando si elencano più elementi <source>, il browser riproduce il primo che riesce a decodificare e ignora gli altri. Conviene quindi ordinarli dal più preferito al meno preferito — di solito WebM prima (file più piccolo), poi MP4 (più compatibile) come fallback affidabile. L'attributo type consente al browser di saltare un formato che non supporta senza scaricare il file.

Qualsiasi contenuto inserito tra <video> e </video> (a parte <source> e <track>) viene mostrato solo quando il browser non riesce a riprodurre nessuna delle sorgenti. Usalo per un messaggio di fallback e un link per il download.

Imposta sempre width e height (o definisci le dimensioni in CSS) in modo che il browser riservi lo spazio prima che il video venga caricato. Questo previene il cumulative layout shift (CLS), ovvero lo spostamento del contenuto quando il lettore appare.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls playsinline>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
      <!-- Shown only if no source can be played -->
      Your browser doesn't support HTML video.
      <a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
    </video>
    <p>Some information about video</p>
  </body>
</html>

Provalo tu stesso »

Suggerimento

Gli attributi controls, autoplay, loop e muted sono attributi boolean — non richiedono un valore. La loro sola presenza attiva la funzionalità.

Didascalie e sottotitoli con `<track>`

Per l'accessibilità, aggiungi un elemento <track> che punti a un file WebVTT (.vtt). L'attributo kind indica al browser come trattare la traccia di testo:

subtitles — traduzioni del dialogo per gli spettatori che non comprendono la lingua.
captions — trascrizione del dialogo più suoni importanti non verbali (musica, effetti sonori), per gli spettatori sordi o con problemi di udito.
descriptions — descrizione testuale degli elementi visivi, pensata per essere letta ad alta voce agli spettatori che non possono vedere il video.
chapters — titoli dei capitoli usati per navigare nel media.

Fornire didascalie per video preregistrati soddisfa il WCAG 2.1 Success Criterion 1.2.2 (Captions). Usa srclang per impostare la lingua della traccia e default per abilitare una traccia automaticamente.

<video width="320" height="240" controls>
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
  <track default kind="captions" srclang="en" label="English"
         src="/build/videos/arcnet.io(7-sec).vtt" />
</video>

Un file WebVTT minimale appare così:

WEBVTT

00:00.000 --> 00:04.000
Welcome to the demo video.

00:04.000 --> 00:07.000
[upbeat music playing]

Autoplay (e perché richiede `muted`)

Per prevenire pubblicità invasive, la maggior parte dei browser blocca l'autoplay quando è presente l'audio. Di conseguenza, autoplay funziona in modo affidabile solo quando il video è anche muted:

<video autoplay muted loop controls playsinline width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Attenzione

I media in autoplay possono rappresentare un serio problema di accessibilità — possono distrarre gli utenti, interferire con gli screen reader e causare disagi alle persone con disturbi vestibolari. Mantieni i clip in autoplay silenziati, brevi, e preferisci lasciare che gli utenti avviino la riproduzione da soli. Includi sempre controls in modo che il video possa essere messo in pausa.

L'attributo `poster`

poster imposta un'immagine segnaposto mostrata prima che il video inizi la riproduzione (o finché non sono stati caricati dati sufficienti). Senza di esso, i browser mostrano il primo fotogramma, che spesso è vuoto.

<video width="320" height="240" controls poster="/build/videos/cover.jpg">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

L'attributo `preload`

preload suggerisce al browser quanti dati caricare prima della riproduzione. È solo un suggerimento — il browser può ignorarlo (e viene ignorato quando autoplay è attivo).

<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

L'attributo `loop`

loop riavvia il video automaticamente ogni volta che termina. È più utile per clip di sfondo brevi e d'atmosfera, tipicamente combinato con autoplay muted.

<video loop autoplay muted playsinline width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Attributi

Attributi	Valore	Descrizione
autoplay	autoplay	Specifica che il video inizierà la riproduzione automaticamente non appena pronto.
controls	controls	Mostra i controlli che consentono all'utente di gestire la riproduzione video, inclusi volume, avanzamento rapido e pausa/ripresa.
height	pixel	Imposta l'altezza del lettore video.
loop	loop	Specifica che il video si riavvierà dall'inizio ogni volta che termina.
muted	muted	Specifica che il video sarà inizialmente senza audio.
poster	URL	Imposta un'immagine mostrata durante il download del video o finché l'utente non preme il pulsante play.
preload	auto, metadata, none	Suggerisce quanti contenuti caricare prima della riproduzione (vedi i valori di seguito). Ignorato quando autoplay è attivo.
src	URL	Imposta l'URL del video incorporato. In alternativa si può usare un elemento `<source>`.
width	pixel	Imposta la larghezza del lettore.

L'attributo preload accetta tre valori:

none — il video non deve essere precaricato.
metadata — vengono recuperati solo i metadati come durata e dimensioni.
auto — l'intero file video può essere scaricato.

Il tag <video> supporta anche gli Attributi Globali e gli Attributi di Evento.

Elementi correlati

<source> — specifica uno dei diversi file multimediali per <video> o <audio>.
<track> — aggiunge didascalie, sottotitoli o capitoli come traccia WebVTT.
<audio> — incorpora contenuti esclusivamente audio.

Esercitazione

Pratica

A cosa può servire l'elemento video HTML? (Seleziona tutte le risposte applicabili)

Per incorporare video nei documenti HTMLPer integrare un link live nei documenti HTMLPer inserire immagini nel documento HTMLPer consentire agli utenti di controllare la riproduzione, come play, pausa e volumePer sostituire tutti gli stili CSS

Pratica

Quale combinazione di attributi consente a un video di eseguire l'autoplay in modo affidabile nei browser moderni?

autoplay da soloautoplay insieme a mutedloop insieme a postercontrols insieme a preload

Sintassi

Esempio del tag HTML <video> con gli attributi controls, muted e src:

Sorgenti multiple e testo di fallback

Didascalie e sottotitoli con <track>

Autoplay (e perché richiede muted)

L'attributo poster

L'attributo preload

L'attributo loop