I video sono elementi multimediali abbastanza utilizzati nei siti web, per presentare visivamente i servizi che offrono o per animare di più la pagina.
I tag dei video
Per inserire un video, si utilizza il tag <video>. Per indicare la sorgente del video, cioè dove si trova e quale è il file, bisogna usare il tag <source>. A quest’ultimo si aggiunge sempre l’attributo src con l’indirizzo del file video, e type=”valore” che indica il file e la sua estensione.
<video>
<source src="esempio.mp4" type="video/mp4">
</video>
Attenzione: le estensioni supportate, da inserire all’interno di type, sono .mp4 (video/mp4), .ogg (video/ogg), .webm (video/webm).
Attributi generici di <video>
Nel tag <video>, di solito si aggiungono alcuni attributi standard, come width e height.
<video width="500px" height="300px">
<source src="esempio.mp4" type="video/mp4">
</video>
I controlli dei video
Un altro importante attributo è controls in <video>, che permette all’utente di usare i controlli del video che, ad esempio, servono per andare avanti e indietro.
<video width="500px" height="300px" controls>
<source src="esempio.mp4" type="video/mp4">
</video>
Mutare un video
L’attributo muted in <video> serve per mutare il video.
<video width="500px" height="300px" muted>
<source src="esempio.mp4" type="video/mp4">
</video>
Avviare automaticamente il video
Per avviare automaticamente il video, bisogna inserire l’attributo autoplay. Attenzione: molti browser bloccano i video automatici se non contengono anche l’attributo muted.
<video width="500px" height="300px" muted autoplay>
<source src="esempio.mp4" type="video/mp4">
</video>
Ripetere i video automaticamente
Se vuoi che un video si ripeta quando finisce, puoi usare l’attributo loop.
<video width="500px" height="300px" loop>
<source src="esempio.mp4" type="video/mp4">
</video>
Aggiungere più sorgenti in un video
Se un video non sarà più disponibile, puoi inserire un secondo video che viene visualizzato solo nel caso in cui il primo non possa essere riprodotto. Basta inserire due <source>, uno sotto l’altro. Puoi anche usare questo metodo per inserire due estensioni dello stesso video. Sotto <source>, puoi indicare una scritta che viene visualizzata solo quando tutti i video non possono essere riprodotti.
<video width="500px" height="300px">
<source src="esempio.mp4" type="video/mp4">
<source src="esempio1.mov" type="video/mov">
Errore di riproduzione!
</video>
Aggiungere un video con YouTube
Puoi anche aggiungere un video YouTube nella pagina HTML. Mentre guardi un video YouTube da un pc, clicca su ‘Condividi’ e poi su ‘Incorpora’ per avere il codice con un <iframe>.
| Prossima lezione |