I video sono tra gli elementi multimediali più utilizzati nei siti web moderni, insieme alle immagini. Possono essere impiegati per presentare un prodotto o un servizio, mostrare una dimostrazione, spiegare un argomento oppure rendere una pagina più dinamica e coinvolgente.
Per inserire un video in una pagina HTML si utilizza il tag <video>. Al suo interno vengono inseriti uno o più tag <source>, che specificano la posizione dei file video disponibili.
Nel tag <source> si utilizza normalmente l'attributo src="valore", che specifica il percorso del file, e l'attributo type="valore", che indica il formato del file affinché il browser possa riconoscerlo correttamente.
<video>
<source src="esempio.mp4" type="video/mp4">
</video>
I formati video supportati dalla maggior parte dei browser sono:
video/mp4 per i file con estensione .mp4.video/ogg per i file con estensione .ogg.video/webm per i file con estensione .webm.Tra questi, il formato MP4 è quello più diffuso e garantisce generalmente la migliore compatibilità.
<video>Il tag <video> mette a disposizione diversi attributi per controllare il comportamento del video. Tra i più utilizzati ci sono width="larghezza" e height="altezza", che permettono di specificare le dimensioni dell'elemento nella pagina.
<video width="500px" height="300px">
<source src="esempio.mp4" type="video/mp4">
</video>
Se viene specificata soltanto una delle due dimensioni, l'altra viene calcolata automaticamente mantenendo le proporzioni originali del video.
L'attributo controls aggiunge i controlli standard del browser, permettendo all'utente di avviare o mettere in pausa il video, modificare il volume, avanzare o tornare indietro nella riproduzione e visualizzarlo a schermo intero.
<video width="500px" height="300px" controls>
<source src="esempio.mp4" type="video/mp4">
</video>
L'attributo muted fa sì che il video venga riprodotto senza audio.
<video width="500px" height="300px" muted>
<source src="esempio.mp4" type="video/mp4">
</video>
Per avviare automaticamente un video quando la pagina viene caricata si utilizza l'attributo autoplay.
I browser moderni, tuttavia, bloccano spesso la riproduzione automatica dei video con audio attivo. Per questo motivo è buona norma utilizzare autoplay insieme all'attributo muted, così da garantire una maggiore compatibilità.
<video width="500px" height="300px" muted autoplay>
<source src="esempio.mp4" type="video/mp4">
</video>
Se desideri che il video ricominci automaticamente al termine della riproduzione, puoi aggiungere l'attributo loop.
<video width="500px" height="300px" loop>
<source src="esempio.mp4" type="video/mp4">
</video>
All'interno dello stesso tag <video> è possibile inserire più tag <source>. Il browser proverà a riprodurre il primo file disponibile e, se non è compatibile o non può essere caricato, passerà automaticamente a quello successivo.
Questa tecnica viene utilizzata soprattutto per offrire lo stesso video in formati differenti, aumentando la compatibilità con i vari browser e dispositivi.
È inoltre possibile inserire un messaggio di testo tra <video> e </video>. Questo testo verrà visualizzato soltanto se nessuno dei file video potrà essere riprodotto.
<video width="500px" height="300px">
<source src="esempio.mp4" type="video/mp4">
<source src="esempio1.mov" type="video/mov">
Errore di riproduzione!
</video>
Un video può essere incorporato anche da YouTube. In questo caso non viene utilizzato il tag <video>, ma un elemento <iframe> (che abbiamo visto nella lezione sugli iframe) fornito direttamente da YouTube.
Per ottenere il codice, apri il video su YouTube da computer, fai click su Condividi, poi su Incorpora. YouTube mostrerà il codice HTML da copiare e incollare nella tua pagina.