HTML5 offre la possibilità di inserire file video all’ interno dei nostri documenti grazie al nuovo tag <video>.
Questo elemento offre la possibilità di inserirli nei seguenti formati: Mp4 , WebM ed Ogg.
Trattandosi di un tag relativamente “recente” , è interamente supportato dalle seguenti versioni di browsers in poi:
versione 4.0
versione 3.5
versione 4.0
versione 9.0
versione 10.5
Inoltre , non tutti i browsers sopracitati , supportano i 3 tipi di file che il tag <video> riesce a gestire , di seguito un riassunto.
- supporta i seguenti formati : MP4 , WebM ,Ogg
- supporta i seguenti formati : MP4 , WebM ,Ogg
- supporta i seguenti formati : MP4
- supporta i seguenti formati : MP4
- supporta i seguenti formati : MP4 (dalla versione 25), WebM ,Ogg
Il tag <video> , supporta le proprietà globali e gli eventi globali di HTML.
Sintassi di base
La sintassi di base per inserire un file video in Html è la seguente:
<video controls >
<source src=”nomevideo.estensione”
type=”video/estensione“>
Frase da mostrare a video in caso in cui non fosse
supportato
</video>
Con il codice sopra indicato, si inserisce un video in una pagina html (salvato nella stessa directory della pagina stessa), il video sarà a schermo intero e partirà dopo aver premuto il tasto play.
- <video controls> : mostra i controlli di riproduzione (play , pausa , volume)
- <source src> : indica il nome del file da riprodurre, è consigliabile inserire più versioni dello stesso file per consentirne la riproduzione su ogni browser.
- <type> : indica il formato
- <video controls> testo </video>: mostra un testo nel caso in cui il formato del video non sia riconosciuto dal nostro browser.
E’ possibile decidere la dimensione della finestra di riproduzione tramite le proprietà width=”larghezza” height=”altezza”.
Esempio
<!doctype
html>
<html lang=”it”>
<body>
<video controls width=”300″ height=”250″ >
<source src=”video.mp4″
type=”video/mp4″>
Frase da mostrare a video in caso in cui non fosse supportato
</video>
</body>
</html>
Quando inseriamo un video in una pagina HTML , omettendo i parametri di altezza e larghezza , il video verrà riprodotto con la sua dimensione originale, diminuendone le dimensioni esso verrà riadattato senza causare distorsione alcuna.
AUTOPLAY (autoriproduzione)
Per far partire automaticamente i video , si utilizza l’ attributo autoplay.
<!doctype html>
<html lang=”it”>
<body>
<video controls width=”300″ height=”250″ autoplay>
<source src=”video.mp4″
type=”video/mp4″>
Frase da mostrare a video in caso in cui non fosse supportato
</video>
</body>
</html>
Autoplay così come mostrato nell’ esempio , riproduce il file senza necessità che venga premuto alcun tasto.
Per evitare che il video venga stoppato dall’ utente, è possibile omettere il parametro control, come da esempio di seguito.
<!doctype html>
<html lang=”it”>
<body>
<video width=”300″ height=”250″ autoplay>
<source src=”video.mp4″
type=”video/mp4″>
Frase da mostrare a video in caso in cui non fosse supportato
</video>
</body>
</html>
LOOP (riproduzione continua )
Per fare in modo che il nostro video venga riprodotto continuamente al suo termine , utilizziamo l’ attributo loop.
Questo attributo può essere utilizzato in due modi:
- Con la possibilità di utilizzare i comandi <video controls loop width=”300″height=”250″ autoplay>
- Senza la possibilità di utilizzare i comandi <video loop autoplay width=”300″height=”250″ >
Modificando come segue il nostro codice HTML il file , partirà tramite comando manuale (e potrà essere stoppata in egual modo) , ma continuerà a ricominciare una volta terminato.
<!doctype html>
<html lang=”it”>
<body>
<video controls loop width=”300″ height=”250″
>
<source src=”video.mp4″
type=”video/mp4″>
Frase da mostrare a video in caso in cui non fosse supportato
</video>
</body>
</html>
Modificando come segue il nostro codice HTML il file partirà automaticamente e continuerà a riprodursi fino alla chiusura della pagina stessa.
<!doctype html>
<html lang=”it”>
<body>
<video loop autoplay width=”300″ height=”250″ >
<source src=”video.mp4″ type=”video/mp4″>
Frase da mostrare a video in caso in cui non fosse supportato
</video>
</body>
</html>