Inserire video in un sito web

I video catturano l’attenzione e non solo piacciono ai visitatori del vostro sito web, ma anche ai motori di ricerca, che premiano i siti web con contenuti multimediali. In particolare i video vi permettono di personalizzare l’offerta informativa in maniera più varia. Inoltre, è possibile presentare i prodotti e i servizi in maniera più dettagliata attraverso i video, rispetto a quelli fatti solo di testi e immagini. Ma, per molto tempo, non è stato facile inserire contenuti visuali sui siti web perché si dovevano installare manualmente i plug-in adatti per il browser (ad esempio Adobe Flash Player) sui dispositivi e aggiornarli regolarmente, aspetto che aveva spesso come conseguenza incompatibilità e falle di sicurezza. I fornitori dovevano confrontarsi con codici da incorporare complicati e avevano difficoltà a convertire i video nei formati adatti (ad esempio SWF). Ma queste tecnologie ausiliari sono già acqua passata: l’HyperText Markup Language (HTML) offre a partire dalla sua quinta versione un elemento nativo, con il quale si possono integrare a pieno titolo i video nel codice del sito web. In alternativa potete caricarli in maniera sicura su piattaforme di video hosting come YouTube o Vimeo. Vi spieghiamo come funziona.

Incorporare un video con HTML5 diventa un gioco da ragazzi: tutto quello che vi serve è l’elemento nativo <video> (a cui ci si riferisce anche come tag <video>), che si lascia ampliare da attributi opzionali. Il seguente esempio vi mostra come inserire un video nel codice sorgente del vostro sito web:

Nell’esempio l’elemento <video> contiene l’URL al contenuto visuale (src="https://www.ionos.it/digitalguide/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, i gestori di siti web usano questa funzione per offrire una descrizione alternativa e un link che permette di scaricare il video.

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:

Le versioni attuali dei browser più comuni supportano HTML5. Per rendere accessibili i video sul vostro sito web anche per quegli utenti, che non sono aggiornati a livello tecnologico, la descrizione dentro il tag <video> mette a disposizione un file separato per il download del video. Chi visualizza il testo alternativo invece del video, può così scaricare il contenuto e visualizzarlo su un media player locale.

Il tag <video> definisce le specifiche in HTML5 e l’API (application programming interface), 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, WebM, OggTheora e H.264/MPEG4, ha vantaggi e svantaggi. E così, fino a oggi, i browser principali non sono riusciti a trovare uno standard comune. Mentre Internet Explorer e Safari puntano soprattutto sul formato proprietario H.264/MPEG4, a disposizione quasi ovunque a partire dal 2013, i browser Firefox, Chrome e Opera supportano anche i formati royality free come Ogg Theora e WebM.

Per evitare incompatibilità, si consiglia di mettere a disposizione i video in diversi formati. 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.

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. 

Chi non mette a disposizione i video sul proprio server, ma vorrebbe approfittare dell’hosting dei contenuti visuali su 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 vostri 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 che il proprio server non viene sovraccaricato ulteriormente dallo streaming. Ma i gestori di siti web dovrebbero informarsi prima sulle condizioni d’uso della piattaforma di video hosting e adattare il codice da incorporare in maniera appropriata alle proprie esigenze.

Ad esempio, se desiderate incorporare un video da YouTube, aprite la clip in questione sulla piattaforma ed estraete 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 avete incorporato, che hanno associato parole chiave simili e, nel caso peggiore, si tratta di video dei vostri diretti concorrenti.