• Programmazione » HTML 5 » Guida HTML5

Vediamo come funziona il tag video HTML5. Esempi e codici.

Il tag <video> HTML5 definisce un nuovo metodo dedicato per incorporare video ed elementi multimediali all’interno di pagine web. Si tratta di uno standard più specifico, che ci aiuta nella produzione di documenti “puliti” e conformi agli standard Internet.

Il tag <video>  è supportato da tutti i maggiori browser a partire dalle seguenti versioni: Internet Explorer 9, Mozilla Firefox 3.5, Google Chrome 3.0, Apple Safari 3.0 e Opera 10.5.

L’implementazione all’interno di una pagina web ha grossomodo questo aspetto:

<video src="video.ogg" controls="controlli">Attenzione: il tuo browser non supporta il tag video</video>

Attenzione: il testo racchiuso all’interno del tag verrà mostrato solo in caso di incompatibilità browser.

Per svolgere le sue funzioni, <video> è accompagnato da una serie di attributi opzionali.

Audio

L’attributo “audio” determina lo stato audio di default del video in questione. L’attributo è affiancato dal valore “muted”. Muted è attualmente l’unico valore supplementare che è possibile applicare al nostro player: stabilisce che nessun suono venga riprodotto.

Nota bene: attualmente questo valore sembra avere qualche problema di compatibilità, potrebbe pertanto non funzionare in modo corretto.

<video controls="controls" audio="muted">  <source src="movie.ogg" type="video/ogg" />  <source src="movie.mp4" type="video/mp4" />  <source src="movie.webm" type="video/webm" />Attenzione: il tuo browser non support ail tag video.</video>

Autoplay

L’attributo <video> autoplay definisce l’inizio di un video non appena possibile, di solito al primo caricamento di pagina.

<video controls="controls" autoplay="autoplay">  <source src="movie.ogg" type="video/ogg" />  <source src="movie.mp4" type="video/mp4" />  <source src="movie.webm" type="video/webm" />Attenzione: il tuo browser non support ail tag video.</video>

Nell’esempio in alto è stato importato lo stesso video in 4 codifiche differenti.

Controls

La presenza dell’attributo “controls” determina la visualizzazione  dei controlli video sul player di riproduzione.

I controlli di riproduzione disponibili possono includere i seguenti elementi:

• play
• pausa
• cerca
• volume
• fullscreen
• sottotitoli
• tracce audio

<video controls="controls" controls="controls">  <source src="movie.ogg" type="video/ogg" />  <source src="movie.mp4" type="video/mp4" />  <source src="movie.webm" type="video/webm" />Attenzione: il tuo browser non support ail tag video.</video>