Guida HTML interattiva: Tag video

Q: Come inserisco un video in HTML?

Usa . L'attributo controls mostra il pulsante play, la barra di avanzamento e il volume del browser. Senza, il video mostra il primo fotogramma (o il poster) e l'utente non può avviarlo.

Q: Come aggiungo un'anteprima a un video?

Usa l'attributo poster con l'URL di un'immagine: . L'immagine resta visibile finché il video non inizia a riprodursi.

Q: Come aggiungo i sottotitoli a un video HTML?

Aggiungi un dentro il video. Il file usa il formato WebVTT, e il browser mostra un pulsante per i sottotitoli nei suoi controlli.

Q: Come rendo responsive un video?

Imposta width: 100% e height: auto nel CSS (oppure max-width: 100%). Il video si ridimensiona con il suo contenitore e mantiene le proporzioni.

Come inserire un video

Punta l'elemento <video> su un file video e aggiungi controls perché chi legge possa riprodurlo:

<video src="movie.mp4" controls width="640"></video>

controls mostra il player integrato del browser: play e pausa, la barra di avanzamento, il volume e lo schermo intero. Senza, il video resta fermo lì. Questa anteprima non può caricare file video, quindi gli esempi di questa pagina alimentano l'elemento con una piccola animazione su canvas disegnata da uno script; gli attributi funzionano esattamente come con un file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Dato che la sorgente è uno stream dal vivo e non un file, qui la barra di avanzamento non si può trascinare e non c'è una durata fissa. Con un vero .mp4, lo stesso player ha una barra di avanzamento completa.

Attributi di video

Attributo	Cosa fa
`controls`	Mostra i controlli del player del browser
`autoplay`	Inizia la riproduzione appena possibile (in pratica solo con `muted`)
`muted`	Parte con l'audio disattivato
`loop`	Ricomincia dall'inizio quando finisce
`playsinline`	Su iPhone si riproduce nella pagina invece di passare a schermo intero
`poster="thumb.jpg"`	Immagine mostrata prima che il video parta
`preload`	`none`, `metadata` (solo dimensioni e durata) o `auto` (il browser decide quanto scaricare)
`width`, `height`	Dimensioni in pixel; impostarle entrambe riserva lo spazio prima che il video si carichi

Autoplay, muted e loop

I browser bloccano i video che partono da soli con il sonoro. Un video senza audio può invece partire in automatico, ed è così che funzionano i video di sfondo e le brevi clip in loop:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

I quattro attributi funzionano insieme: autoplay per partire, muted perché il browser lo permetta, loop per una clip e playsinline perché gli iPhone non lo aprano a schermo intero. Un video con il sonoro che parte da solo non è soltanto bloccato: è anche un problema per chi usa uno screen reader, la cui voce viene coperta. Se una clip dura più di cinque secondi, offri un modo per metterla in pausa.

Immagine poster e preload

poster mostra un'immagine prima che il video parta, come un'anteprima. Qui il video non ha nessuna sorgente, quindi il poster è l'unica cosa che si vede:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Con preload="none" il browser non scarica nulla finché chi legge non preme play, e il poster evita che lo spazio sembri vuoto. Usa preload="metadata" quando vuoi che la durata sia visibile prima della riproduzione. Senza poster, la maggior parte dei browser mostra il primo fotogramma appena lo ha caricato.

Formati e alternative con source

Al posto di src puoi elencare più file con elementi <source>. Il browser riproduce il primo che supporta:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

L'MP4 con video H.264 si riproduce in tutti i browser attuali, quindi è la scelta sicura quando hai un solo file. L'attributo type permette al browser di saltare i formati che non sa riprodurre senza scaricarli. Il testo alla fine compare solo nei browser che non supportano affatto <video>.

Sottotitoli con track

<track kind="captions"> carica un file WebVTT, un file di testo semplice con righe temporizzate. Il browser aggiunge un pulsante per i sottotitoli ai suoi controlli e disegna il testo sopra il video:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

I sottotitoli aiutano le persone sorde o con difficoltà uditive, chi guarda senza audio e chiunque segua un video in una seconda lingua. Aggiungi default a una traccia per mostrarla senza clic. Un file di sottotitoli da un altro dominio richiede gli header CORS e crossorigin sul video.

Stile e controllo con JavaScript

Un video è un elemento sostituito, come un'immagine: width: 100% con height: auto lo rende responsive, e object-fit decide come riempie un riquadro di forma diversa. JavaScript ha play(), pause(), currentTime, volume ed eventi come play, pause ed ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() restituisce una promise che viene rifiutata quando il browser blocca la riproduzione (per esempio un autoplay con l'audio attivo), quindi il codice in produzione dovrebbe gestirla con catch. Creare controlli tuoi è facoltativo; i controls integrati sono accessibili da tastiera e tradotti, cose che i pulsanti personalizzati devono riprodurre. Per i video ospitati su YouTube o Vimeo, invece, incorpori il loro player con un iframe.

Errori comuni

Autoplay senza muted. Il browser lo blocca. Aggiungi muted e playsinline.
Dimenticare controls. A meno che tu non crei i tuoi, chi legge non ha modo di avviare il video.
Niente width e height. La pagina salta quando il video si carica. Impostali entrambi, poi ridimensiona con il CSS.
File enormi. Comprimi i video per il web e usa preload="none" o "metadata" per i video più in basso nella pagina.
Niente sottotitoli nei video parlati. Aggiungi un <track kind="captions">.

Domande frequenti

Come inserisco un video in HTML?

Usa <video src="movie.mp4" controls width="640"></video>. L'attributo controls mostra il pulsante play, la barra di avanzamento e il volume del browser. Senza, il video mostra il primo fotogramma (o il poster) e l'utente non può avviarlo.

Perché l'autoplay del mio video non funziona?

I browser bloccano la riproduzione automatica con il sonoro. Aggiungi muted accanto ad autoplay, e playsinline perché gli iPhone lo riproducano nella pagina invece che a schermo intero: <video autoplay muted loop playsinline>.

Che formato video devo usare per il web?

L'MP4 con video H.264 si riproduce in tutti i browser attuali, quindi è la scelta sicura di default. Puoi indicare prima un file WebM più leggero con <source> e lasciare che il browser scelga il primo formato che supporta.

Come aggiungo un'anteprima a un video?

Usa l'attributo poster con l'URL di un'immagine: <video poster="thumb.jpg" controls>. L'immagine resta visibile finché il video non inizia a riprodursi.

Come aggiungo i sottotitoli a un video HTML?

Aggiungi un <track kind="captions" src="captions.vtt" srclang="it" label="Italiano"> dentro il video. Il file usa il formato WebVTT, e il browser mostra un pulsante per i sottotitoli nei suoi controlli.

Come rendo responsive un video?

Imposta width: 100% e height: auto nel CSS (oppure max-width: 100%). Il video si ridimensiona con il suo contenitore e mantiene le proporzioni.

Concetti correlati