Come inserire player audio e video HTML5 in un blog.

Come inserire un filmato o un file audio in una pagina web utilizzando i tag

HTML5 è tutto un insieme di nuove tecnologie che non è qui il caso di enumerare e che si estrinsecano in un nuovo linguaggio di markup. Mi limito a fare solo degli esempi. Visto che gli sviluppatori si riferiscono spesso a posizioni del layout quali header o footer ecco che sono stati introdotti proprio questi tag anche per dare un valore semantico a queste sezioni delle pagine web. Il linguaggio HTML5 è anche legato al CSS3 e a nuovi standard di cui ho già parlato come i microdati e i microformati.

Una parte importante dell'HTML5 la riveste soprattutto la multimedialità con l'utilizzo dei nuovi tag <audio> e <video> per l'inserimento di filmati e di file audio senza utilizzo di plugin esterni quali Flash di Adobe o Silverlight di Microsoft.

I browser di ultimissima generazione supportano tutti gran parte dei tag HTML5. Se avete dei dubbi in proposito potete sempre recarvi nella pagina HTML5 Test per controllare i tag e le funzionalità supportate. Ci sarà anche un punteggio che andrà fino a un massimo di 500 punti. La cosa più importante però è quella di capire quali parti dell'HTML5 sono rilevate. Se avete Firefox e Chrome aggiornati avrete pochi problemi nel visualizzare pagine web che utilizzano questo nuovo linguaggio.

Da qualche tempo anche Youtube supporta l'HTML5 e se non usate IE vi consiglio di andare nella pagina HTML5 di Youtube per attivare la versione di prova di HTML5. I video si vedranno meglio e il PC consumerà meno risorse. Nel caso non fosse così si può sempre disattivare andando su Esci.

Fatto tutto questo spero non inutile preambolo vediamo come si possano usare i tag <audio> e <video> per installare player audio e video senza bisogno di plugin ma solo con una riga di codice.

Saranno visibili anche i controlli per il volume, per lo scorrimento della riproduzione e per lo schermo intero riguardo al player video. Si possono usare formati video e audio di diversi tipi ma per non appesantire troppo il post mi limito ai formati MOV per i video e MP3 per l'audio. Per convertire un video in MOV potete usare il programma gratuito Format Factory.

DOVE CARICARE I FILE AUDIO E I FILMATI

Se avete un blog gratuito del tipo mioblog.blogspot.com potete caricare i file MP3 e MOV direttamente nel vostro account Google Sites. Se invece avete un dominio personalizzato allora dovrete usare un altro hosting che offre i link diretti come la cartella Public di DropBox. Dopo aver caricato i file è appunto necessario ottenerne l'hotlink per poi inserirlo nel codice.

CODICE AUDIO PLAYER HTML5

Il codice per inserire un player audio è il seguente

<audio controls=" " preload="auto" src="URL_Brano.mp3"></audio>

Il tag preload="auto" serve per bufferizzare l'audio prima della riproduzione. Al posto di auto si può mettere none per non farlo affatto o metadata per farlo solo con i metadati. Si possono inserire anche altri attributi quali autoplay e loop rispettivamente per riprodurre automaticamente e per ricominciare da capo la riproduzione senza soluzione di continuità.

Si può anche aggiungere una riga per avvertire gli utenti di browser che non supportano HTML5

<audio controls=" " preload="auto" src="URL_Brano.mp3" autoplay loop>
Il tuo browser non supporta l'elemento <code>audio</code>.
</audio>

CODICE VIDEO PLAYER HTML5

Il codice per inserire un player video HTML5 è molto simile al precedente

<video controls=" " preload="auto" src="URL_VIDEO.mov" width="400"></video>

dove si può anche inserire la larghezza del player. Anche in questo caso sono supportati i tag autoplay e loop. Ho postato come mio solito una demo in un blog di prova

Il player audio sarà subito funzionante mentre quello video avrà bisogno di alcuni secondi di caricamento. Da notare che per il player video esiste anche la funzione a tutto schermo.