Come fare un player audio/video in Html5
Per visualizzare un file video in una pagina web, utilizzo il tag <video> del linguaggio HTML5. E' un elemento standard per i video embed.
<video>
<source src=nome type=tipo>
</video>
Ecco un esempio pratico
- <video width="400" height="500" controls>
- <source src="file.mp4" type="video/mp4">
- messaggio per i browser che non supportano il tag video
- </video>
I principali attributi del tag <video> sono:
- width = la larghezza del video in pixel
- height = l'altezza del video in pixel
- controls visualizza i controlli play, pausa e volume sul video.
- autoplay avvia automaticamente la riproduzione del video con il caricamento della pagina web. Non funziona su tutti i dispositivi mobile.
Il nome del file video va specificato nell'elemento <source> nell'attributo src.
All'interno dell'elemento <source> deve essere specificata anche la tipologia di file video nell'attributo type.
- src = il nome del file
- type = il formato del file video
Quali formati video supporta il player?
Il tag video supporta i formati Mp4, WebM e Ogg
- video/mp4
- video/webm
- video/ogg
Il formato Mp4 è comunque preferibile perché, a differenza degli altri, è letto senza problemi da tutti i browser.
E se il browser non supporta l'Html5?
In questo caso l'utente non vede nulla.
Per questa ragione è opportuno aggiungere all'interno del tag <video> anche un messaggio per i browser che non supportano l'HTML5.
Quali browser supportano il tag video? Il tag <video> è supportato dalle versioni più recenti di tutti i browser: Chrome dalla versione 4.0, Internet Explorer dalla versione 9.0, Firefox dalla versione 3.5, Safari dalla versione 4.0 e Opera dalla versione 10.5.
