Come inserire un player audio o video con HTML5

L'HTML5,  con l'utilizzo dei nuovi tag <audio> e <video> permette l'inserimento di filmati e di file audio senza utilizzo di plugin esterni quali Flash di Adobe o Silverlight di Microsoft.

Oramai  la maggior parte dei browser  supportano gran parte dei tag HTML5.

Vediamo  come si possano usare i tag <audio> e <video> per installare player audio e video solo con una riga di codice.

Premessa: i file audio vanno caricati in uno spazio dove è possibile ottenere il link diretto o hotlink. Un esempio è illustrato in questo post..

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>


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.