HTML: come inserire video in un sito web

A partire da HTML5, esiste un elemento nativo che consente di in­cor­po­ra­re video come contenuti web a tutti gli effetti. In al­ter­na­ti­va, hai la pos­si­bi­li­tà di ri­vol­ger­ti a fornitori come YouTube o Vimeo. Ti mostriamo come funziona

HTML5: inserire video fa­cil­men­te

In­cor­po­ra­re 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 de­fi­ni­sco­no 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ò vi­sua­liz­za­re il video. Di regola, chi gestisce un sito web usa questa funzione per offrire una de­scri­zio­ne al­ter­na­ti­va e un link che permette di scaricare il video.

Attributi opzionali dell’elemento video in HTML5

Se si inserisce una risorsa at­tra­ver­so l’elemento video, questo deve contenere il link al contenuto visuale, inserito tramite l’attributo src o con un tag source. Inoltre, si può spe­ci­fi­ca­re ul­te­rior­men­te l’elemento video con i seguenti attributi:

Supporto dei codec in HTML5

L’elemento video definisce la specifica in HTML5 e l’in­ter­fac­cia di pro­gram­ma­zio­ne (API), ma non dà alcuna in­di­ca­zio­ne 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 prin­ci­pa­li browser:

*solo par­zial­men­te

Per evitare in­com­pa­ti­bi­li­tà, si consiglia quindi di mettere a di­spo­si­zio­ne diversi formati, se vorresti inserire un video nel tuo sito. L’elemento video permette a questo scopo di in­cor­po­ra­re diverse risorse video at­tra­ver­so il tag source e di spe­ci­fi­car­lo 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 al­ter­na­ti­vo source è stato inserito con attributo type nell’elemento video, il browser sceglie au­to­ma­ti­ca­men­te all’apertura del sito web il formato video preferito. Da notare che l’elemento video non può contenere, in questo tipo di in­se­ri­men­to video, alcun attributo src con risorse dif­fe­ren­ti.

Inserire un video nel sito at­tra­ver­so una piat­ta­for­ma video

Chi non mette a di­spo­si­zio­ne i video tramite HTML, ma vorrebbe ap­pro­fit­ta­re dell’hosting video di un servizio esterno, ha la pos­si­bi­li­tà di caricare video gra­tui­ta­men­te su piat­ta­for­me come YouTube o Vimeo e di integrare le clip nel proprio sito web grazie a un codice da in­cor­po­ra­re (codice embed).

Dato che le piat­ta­for­me video preferite ga­ran­ti­sco­no che i tuoi contenuti siano com­pa­ti­bi­li con i browser più comuni, i formati di questi servizi vengono sup­por­ta­ti dalla maggior parte dei di­spo­si­ti­vi. Inoltre, l’ou­tsour­cing dei video ha il vantaggio di non so­vrac­ca­ri­ca­re ul­te­rior­men­te il proprio server con lo streaming. Ci si dovrebbe informare prima sulle con­di­zio­ni d’uso della piat­ta­for­ma di hosting video e adattare il codice da in­cor­po­ra­re in maniera ap­pro­pria­ta alle proprie esigenze.

Ad esempio, se desideri in­cor­po­ra­re un video da YouTube, apri la clip in questione sulla piat­ta­for­ma ed estrai il codice da in­cor­po­ra­re dal menu. Qui sono a di­spo­si­zio­ne anche im­po­sta­zio­ni centrali per definire le di­men­sio­ni del video, con­trol­la­re le sta­ti­sti­che e attivare il titolo del video. Per impedire che i contenuti esterni appaiano sul proprio sito web, si consiglia inoltre di di­sat­ti­va­re la funzione anteprima di video al­ter­na­ti­vi. Al­tri­men­ti, la piat­ta­for­ma video presenta anche i contenuti di altri utenti nel player che hai in­cor­po­ra­to, che hanno associato parole chiave simili e, nel caso peggiore, si tratta di video dei tuoi diretti con­cor­ren­ti.