Abbiamo già detto, nella lezione precedente, che HTML5 ha introdotto il tag <audio> al fine di rimpiazzare il tag <object> ed includere più facilmente contenuti sonori in una pagina web.
Come per l'audio, il tag <object> era spesso utilizzato anche per includere video interattivi nelle nostre pagine web (oltre che contenuti Flash ed altri componenti talvolta complessi e pesanti). Insieme al tag <audio>, l'avvento di HTML5 ha quindi introdotto, quasi in modo naturale, un altro tag di uso molto simile, e pensato proprio per la riproduzione di filmati e clip: il tag <video>, oggetto di questa lezione.
Iniziamo anche qui con un semplice esempio d'uso:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Anche in questo caso, come visto per il tag <audio>, è presente un attributo controls, la cui presenza specifica la necessità di visualizzare i controlli utente per gestire la riproduzione del video. Insieme a controls, gli attributi width ed height permettono di specificare la dimensione del video.
Possiamo aggiungere altri due attributi al tag <video>, ovvero autoplay e loop: il primo forza l'esecuzione automatica del video, mentre il secondo fa sì che esso venga automaticamente riprodotto a ciclo continuo. Entrambi questi attributi sono spesso utilizzati omettendo l'attributo controls, ad esempio per creare sfondi animati o video non interattivi a ciclo continuo.
Analogamente a quanto visto per il tag <audio>, all'interno del tag <video> possono essere inseriti uno o più elementi di tipo <source>, usati per specificare il file che ci interessa riprodurre. Nel precedente esempio, abbiamo specificato di riprodurre il file video.mp4 tramite l’attributo src, con l’accortezza di esplicitare anche il tipo di file (type="video/mp4").
Utilizzare più tag <source> ci permette di specificare quali file devono essere riprodotti nel caso in cui ci siano problemi di incompatibilità con il browser. Consideriamo, per esempio, il codice seguente:
<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 tenterà per prima cosa di riprodurre il file specificato nel primo tag <source>. Se (e solo se), per qualche motivo, il file non potesse essere riprodotto, il browser tenterà di riprodurre il secondo file, e così via per tutti i tag <source> seguenti. Per garantire, infine, la retrocompatibilità con le precedenti versioni di HTML, è possibile specificare una stringa (o dell’altro codice HTML) che verrà visualizzata nel caso in cui il browser non supporti il tag <video>.
Ulteriori informazioni ed esempi pratici sono disponibili nella lezione dedicata ai video della guida ad HTML5.