2.32
Utilizzare il tag video per incorporare contenuti video in una pagina web, sfruttando le nuove capacità introdotte da HTML5.
Nella lezione precedente, abbiamo già discusso che HTML5 ha introdotto il tag <audio> per sostituire il tag <object> e semplificare l’inclusione di contenuti audio nelle pagine web.
Analogamente all’audio, il tag <object> veniva spesso utilizzato per incorporare video interattivi nelle nostre pagine web, oltre a contenuti Flash e altri elementi occasionalmente complessi e pesanti. Con l’avvento di HTML5, è stato introdotto in modo naturale un altro tag con un’utilità simile, pensato specificamente per la riproduzione di filmati e clip: il tag <video>, che è l’oggetto di questa lezione.
Iniziamo con un esempio di utilizzo:
<video width=”320″ height=”240″ controls> <source src=”video.mp4″ type=”video/mp4″> </video>
Anche in questo caso, come abbiamo visto con il tag <audio>, è presente l’attributo “controls”, che indica la necessità di visualizzare i controlli utente per gestire la riproduzione del video. Insieme a “controls”, gli attributi “width” e “height” consentono di specificare le dimensioni del video.
Al tag <video> possono essere aggiunti altri due attributi: “autoplay” e “loop”. Il primo avvia automaticamente la riproduzione del video, mentre il secondo fa sì che il video venga riprodotto in modo continuo. Spesso, entrambi questi attributi sono utilizzati senza l’attributo “controls”, ad esempio per creare sfondi animati o video non interattivi in ripetizione.
Come abbiamo visto per il tag <audio>, all’interno del tag <video> possono essere inseriti uno o più elementi di tipo <source>, utilizzati per specificare il file che si desidera riprodurre. Nel caso precedente, abbiamo specificato di riprodurre il file “video.mp4” utilizzando l’attributo “src”, specificando anche il tipo di file con “type=”video/mp4”.
L’utilizzo di più tag <source> consente di specificare quali file devono essere riprodotti in caso di incompatibilità del browser. Ad esempio:
<video width=”320″ height=”240″ controls> <source src=”video.mp4″ type=”video/mp4″> <source src=”video.ogg” type=”video/ogg”> Il browser non supporta il tag video </video>
In questo caso, il browser cercherà innanzitutto di riprodurre il file specificato nel primo tag <source>. Se, per qualche motivo, il file non può essere riprodotto, il browser proverà a riprodurre il secondo file e così via per tutti i tag <source> successivi. Per garantire la retrocompatibilità con le versioni precedenti di HTML, è possibile specificare una stringa o altro codice HTML che verrà visualizzato nel caso in cui il browser non supporti il tag <video>.