• Programmazione » HTML 5 » Guida HTML5

Vediamo il funzionamento di alcuni attributi del tag video. Codici ed esempi.

Width e height

Gli attributi “width” e “height” definiscono larghezza e altezza del player video. I valori di misurazione vengono espressi in pixel.

<video width="320" height="240" 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>

Loop

Quando presente, l’attributo “loop” riproduce a ciclo continuo il video.

<video controls="controls" loop="loop">  <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 supporta il tag video.</video>

Poster

L’attributo “poster” definisce un’immagine di sostituzione quando i dati video non sono disponibili.

<video controls="controls" src="example.ogg" poster="img_sostituzione.jpg">Attenzione: il tuo browser non supporta il tag video.</video>

Preload

L’attributo “preload” specifica se il video verrà caricato o no durante il page loading (caricamento della pagina).

L’attributo HTML5 “preload” è composto da 3 valori di accompagnamento: auto, metadata e none. “Auto” carica l’intero video durante il page loading. “Metadata” carica solo i metadati. “None”, invece, non carica il video durante il page loading.

<video controls="controls" preload="auto">  <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 supporta il tag video.</video>

Src

L’attributo “Src” (search) definisce l’URL (indirizzo) del video da caricare nelle pagine.

Nota bene: un video può essere incorporato in un documento web anche tramite l’uso del tag <source>. Le risorse possono essere implementate attraverso URL assoluti, che richiamano dati da altri siti web, o relativi, che puntano a un file contenuto nella cartella generale di un sito (come nell’esempio in basso).

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

Il tag <source>

Come dicevamo prima, un video all’interno di una pagina può essere incorporato anche grazie al tag source.

In questo modo è possibile indicare diverse versioniformati del file da caricare specificando anche quale file caricare in base al dispositivo (e alla sua dimensione dello schermo) con cui si sta visualizzando il player. Un esempio in basso:

<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)" /><source src="movie.mp4" type="video/mp4" media="screen and (min-width:320px)" /><source src="movie.webm" type="video/webm" media="screen and (min-width:320px)" />Attenzione: il tuo browser non supporta il tag video.</video>