HTML: come inserire video in un sito web

A partire da HTML5, esiste un elemento nativo che consente di incorporare video come contenuti web a tutti gli effetti. In alternativa, hai la possibilità di rivolgerti a fornitori come YouTube o Vimeo. Ti mostriamo come funziona

HTML5: inserire video facilmente

Incorporare un video con HTML5 diventa un gioco da ragazzi: tutto quello che ti serve è l’elemento nativo video, che si lascia ampliare da attributi opzionali. Il seguente esempio ti mostra come inserire un video nel codice sorgente del tuo sito web:

<video src="esempio.mp4" width="320" "height"=240 controls poster="immaginedianteprima.jpg">
    <p>Il video non può essere riprodotto sul tuo browser.<br>
    Fai partire il download del video cliccando su questo<a href="URL">link</a>.</p>
</video>

Nell’esempio l’elemento video contiene l’URL al contenuto visuale (src="esempio.mp4") e gli attributi opzionali width, height, controls e poster, che definiscono come il video si presenta sul sito web. Il testo, che sta tra il tag di apertura e quello di chiusura dell’elemento video, appare solo quando un browser non può visualizzare il video. Di regola, chi gestisce un sito web usa questa funzione per offrire una descrizione alternativa e un link che permette di scaricare il video.

Attributi opzionali dell’elemento video in HTML5

Se si inserisce una risorsa attraverso l’elemento video, questo deve contenere il link al contenuto visuale, inserito tramite l’attributo src o con un tag source. Inoltre, si può specificare ulteriormente l’elemento video con i seguenti attributi:

Supporto dei codec in HTML5

L’elemento video definisce la specifica in HTML5 e l’interfaccia di programmazione (API), ma non dà alcuna indicazione per la codifica video. La scelta del formato del video è dunque un problema per i gestori di siti web, visto che ognuno dei formati più usati, come WebM, Ogg Theora o H.264, ha vantaggi e svantaggi. Fino a oggi, non esiste uno standard comune per tutti i browser. La tabella seguente riepiloga il supporto dei codec video nei principali browser:

*solo parzialmente

Per evitare incompatibilità, si consiglia quindi di mettere a disposizione diversi formati, se vorresti inserire un video nel tuo sito. L’elemento video permette a questo scopo di incorporare diverse risorse video attraverso il tag source e di specificarlo per il browser con l’attributo type.

<video width="320" height="240" controls poster="anteprima.jpg">
    <source src="esempio-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="esempio-vp9.webm" type="video/webm; codecs=vp9">
    <source src="esempio.mp4" type="video/mp4; codecs=avc1.42E01E">
    Il tuo browser non supporta il tag video.
</video>

Se il tag alternativo source è stato inserito con attributo type nell’elemento video, il browser sceglie automaticamente all’apertura del sito web il formato video preferito. Da notare che l’elemento video non può contenere, in questo tipo di inserimento video, alcun attributo src con risorse differenti.

Inserire un video nel sito attraverso una piattaforma video

Chi non mette a disposizione i video tramite HTML, ma vorrebbe approfittare dell’hosting video di un servizio esterno, ha la possibilità di caricare video gratuitamente su piattaforme come YouTube o Vimeo e di integrare le clip nel proprio sito web grazie a un codice da incorporare (codice embed).

Dato che le piattaforme video preferite garantiscono che i tuoi contenuti siano compatibili con i browser più comuni, i formati di questi servizi vengono supportati dalla maggior parte dei dispositivi. Inoltre, l’outsourcing dei video ha il vantaggio di non sovraccaricare ulteriormente il proprio server con lo streaming. Ci si dovrebbe informare prima sulle condizioni d’uso della piattaforma di hosting video e adattare il codice da incorporare in maniera appropriata alle proprie esigenze.

Ad esempio, se desideri incorporare un video da YouTube, apri la clip in questione sulla piattaforma ed estrai il codice da incorporare dal menu. Qui sono a disposizione anche impostazioni centrali per definire le dimensioni del video, controllare le statistiche e attivare il titolo del video. Per impedire che i contenuti esterni appaiano sul proprio sito web, si consiglia inoltre di disattivare la funzione anteprima di video alternativi. Altrimenti, la piattaforma video presenta anche i contenuti di altri utenti nel player che hai incorporato, che hanno associato parole chiave simili e, nel caso peggiore, si tratta di video dei tuoi diretti concorrenti.