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!