Video sul proprio sito: tag video, formati, poster e preload

Inserire un video in una pagina web sembra banale: si carica il file e lo si collega. Nella pratica, un video inserito senza attenzione può rallentare l'apertura della pagina, consumare la banda degli utenti da mobile, non partire su alcuni browser o spostare il contenuto mentre si carica. Con poche scelte ragionate si ottiene invece un risultato leggero, compatibile e accessibile, senza dipendere necessariamente da piattaforme esterne.

Ospitarlo da sé o usare una piattaforma

Le opzioni sono due:

• incorporare un lettore di una piattaforma video: semplice e senza costi di banda, ma il lettore esterno carica script propri, mostra il marchio della piattaforma e può proporre altri contenuti alla fine;
• ospitare il file sul proprio sito o su un servizio di archiviazione: controllo completo su aspetto, privacy e comportamento, ma la banda e la compatibilità diventano responsabilità vostra.

Per brevi video decorativi, dimostrazioni di prodotto o tutorial di pochi minuti, l'ospitalità diretta è spesso la scelta migliore. Per contenuti lunghi e molto visti conviene valutare lo streaming adattivo.

L'elemento video

HTML offre l'elemento <video>, supportato da tutti i browser moderni. Una versione completa e ragionata ha questa forma:

<video controls preload="metadata" poster="anteprima.jpg" width="1280" height="720" playsinline>
  <source src="demo.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
  <source src="demo.h264.mp4" type="video/mp4">
  <track kind="subtitles" src="demo.it.vtt" srclang="it" label="Italiano" default>
</video>

Vediamo gli attributi uno per uno.

Più sorgenti

Il browser legge le <source> in ordine e usa la prima che sa riprodurre. Mettendo prima una versione AV1, più leggera, e poi una H.264 di riserva, i browser recenti scaricano meno dati e quelli più vecchi continuano a funzionare. L'attributo type con il parametro codecs permette al browser di scartare una sorgente senza scaricarla.

Poster

L'immagine poster viene mostrata prima della riproduzione. Senza poster il browser mostra il primo fotogramma, che spesso è nero o poco rappresentativo, e per ottenerlo deve scaricare una parte del video. Un'immagine compressa bene in WebP o AVIF pesa pochissimo.

Preload

L'attributo preload indica quanto scaricare prima che l'utente prema play:

• none: niente, il video si carica solo al clic;
• metadata: solo durata e dimensioni, la scelta equilibrata per la maggior parte dei casi;
• auto: il browser può scaricare anche tutto il file, utile solo se si è certi che verrà guardato.

Dimensioni

Indicare width e height, o usare la proprietà CSS aspect-ratio, riserva lo spazio del video prima che venga caricato. Senza questa informazione la pagina «salta» quando il video appare, un difetto fastidioso per chi legge e penalizzato dalle metriche di stabilità visiva.

Sottotitoli

L'elemento <track> collega un file WebVTT. È fondamentale per l'accessibilità e utile per chi guarda senza audio.

Video in riproduzione automatica

I video decorativi in sottofondo, per esempio nell'intestazione di una pagina, richiedono una combinazione precisa di attributi:

<video autoplay muted loop playsinline poster="sfondo.jpg">
  <source src="sfondo.mp4" type="video/mp4">
</video>

I browser consentono la riproduzione automatica di solito solo se il video è senza audio: l'attributo muted è indispensabile. playsinline evita che su iPhone il video si apra a schermo intero. Per questi video:

• tenete la durata breve, pochi secondi in ciclo;
• rimuovete del tutto la traccia audio dal file, non solo silenziatela;
• usate risoluzione e bitrate contenuti, perché il video sarà spesso coperto da testo;
• rispettate la preferenza dell'utente per il movimento ridotto, mostrando solo il poster quando è attiva.

Preparare il file

Un file per il web dovrebbe avere:

1. l'indice all'inizio del file (opzione -movflags +faststart in FFmpeg), così la riproduzione parte prima che il download sia completo;
2. formato dei pixel yuv420p per la compatibilità;
3. una risoluzione adatta allo spazio reale in pagina: un video mostrato a 800 pixel di larghezza non ha bisogno di essere in 4K;
4. un bitrate controllato con CRF e un tetto massimo.

Quando passare allo streaming adattivo

Un singolo file MP4 va bene finché il video è breve e il pubblico ha connessioni simili. Lo streaming adattivo con HLS diventa preferibile quando:

• i video durano più di qualche minuto;
• molti utenti guardano da reti mobili variabili;
• si vuole offrire più qualità senza che l'utente debba scegliere.

Safari riproduce HLS in modo nativo; negli altri browser serve una libreria JavaScript, che aggiunge peso alla pagina ma resta leggera rispetto al video stesso.

Errori comuni

• caricare il file originale della fotocamera, spesso pesante e in un codec poco compatibile;
• usare preload="auto" su pagine con più video;
• dimenticare il poster, costringendo il browser a scaricare dati solo per mostrare un'anteprima;
• inserire video in riproduzione automatica con audio, che i browser bloccano.

In sintesi

• L'elemento video con più sorgenti offre file leggeri ai browser recenti e compatibilità agli altri.
• Poster e preload="metadata" riducono i dati scaricati prima del play.
• Dimensioni dichiarate evitano spostamenti della pagina.
• La riproduzione automatica richiede video senza audio, brevi e leggeri.
• Per video lunghi e pubblico mobile conviene lo streaming adattivo.