INSERIRE VIDEO IN HTML


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>


Continua a leggere