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.
- Certificato SSL Wildcard incluso
- Registrazione di dominio sicura
- Indirizzo e-mail professionale da 2 GB
HTML5: inserire video facilmente
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:
<video src="esempio.mp4" width=320 height=240 controls poster="immaginedianteprima.jpg">
Il video non può essere riprodotto sul tuo browser.<br>
Fai partire il download del video cliccando <a href="URL">qui</a>.
</video>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.
Attributi opzionali dei video con 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:
| Attributo | Funzione |
|---|---|
| width/height | Gli attributi width e height vi permettono di specificare in maniera esplicita le dimensioni del vostro video. Se manca questo attributo, il tag <video> si serve delle informazioni contenute nel file video. Se usate solo uno dei due attributi, il browser in uso adatta automaticamente il video alla pagina. |
| controls | Con l’attributo controls attivate il controllo nativo del browser. In alternativa, potete definire delle proprie funzioni di controllo con JavaScript. |
| poster | Usate l’attributo poster per rinviare a un file grafico, che dovrebbe essere mostrato come anteprima per il video. Se manca questa specifica, il primo frame del video viene usato per l’anteprima. |
| autoplay | Con autoplay ordinate al browser di far partire automaticamente il video all’apertura del sito web. |
| loop | Se usate l’attributo loop, il video viene riprodotto in loop. |
| muted | Con l’attributo muted mettete l’audio del video su muto. |
| preload | L’attributo preload dice al browser come caricare un video all’apertura del sito. Per questo sono disponibili tre valori: quello standard auto (nel quale normalmente si carica tutto il video), metadata (si caricano solo i metadati) e none (blocca il caricamento automatico dei dati del video). |
Browser senza supporto HTML5
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.
I codec in HTML5
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.
| Browser | MP4 (file MPEG4 con codec video H.264 + Advance Audio Coding) | WebM (file WebM con codec video VP8/VP9 + Vorbis per l’audio) | Ogg (file Ogg con codec video Theora + Vorbis per l’audio) |
|---|---|---|---|
| IE 9+ | sì | no | no |
| Firefox | sì | sì | sì |
| Chrome | sì | sì | sì |
| Safari | sì | no | no |
| Opera | sì | sì | sì |
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.
<video width=320 height=240 controls poster="immaginedianteprima.jpg">
<source src="esempio.webm" type="video/webm">
<source src="esempio. ogg" type="video/ogg">
<source src="esempio.mp4" type="video/mp4">
</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 contenuti visuali attraverso una piattaforma video
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.