Inauguriamo la categoria WebMaster con un bell’articolino sull’uso del nuovo tag <video> di HTML5!! Da questa versione è possibile inserire video nel proprio sito internet senza dover obbligatoriamente inserire player flash. Naturalmente è necessario utilizzare un browser compatibile (Firefox e Chrome sono già compatibili e molti altri lo diventeranno a breve).

Il tag <video> si utilizza con questa sintassi:

<video src=”video.ogg” controls=”controls”>
codice html in caso di non compatibilità del controllo con il browser in uso
</video>

In questo esempio verrà visualizzato il video denominato video.ogg mostrando i controlli per l’avvio, stop, ecc. ecc.

I parametri opzionali utilizzabili sono:

  • autoplay – Fa partire automaticamente il video al caricamento della pagina
  • controls – Mostra i controlli play, stop, ecc.
  • height – Definisce l’altezza del video player
  • loop – Il video, arrivato alla fine,  riparte dall’inizio
  • preload – Se non è presente l’autoplay il video viene precaricato al caricamento della pagina
  • src – Indirizzo internet contenente il video da mostrare
  • width – Definisce la larghezza del video player

Attualmente sono disponibili i formati video OGG e MPEG4 per il playback del contenuto.

OGG è disponibile con Firefox 3.5, Opera 10.5 o Chrome 3 (e superiori) mentre Mpeg4 è disponibile solo con Chrome 3 e Safari 3 (e superiori).

La codifica necessaria per OGG è Ogg files con Thedora video codec e Vorbis audio codec.

La codifica necessaria per Mpeg4 è MPEG 4 files con H.264 video codec e AAC audio codec.

La sintassi del tag <video> nel caso di siti progettati per funzionare su diversi browser diventa quindi:

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogg” />
<source src=”movie.mp4″ type=”video/mp4″ />
Codice html visualizzato sui browser non compatibili
</video>

In questo caso bisognerà creare i contenuti video per entrambi i formati. L’unico browser che attualmente permette di visualizzare un filmato in un solo standard (OGG) è Chrome 3.0 o superiori. Ricordiamo che Chrome  è disponibile in versione definitiva per le piattaforme Linux, Mac e Windows.

Importante: nello spazio tra <video> e </video> è possibile inserire il codice che verrà mostrato in caso di incompatibilità del browser in uso. In questo caso è possibile mettere il codice per il caricamento di un player flash!