Contenuti multimediali con HTML5: i tag audio e video
Pagina 1 di 2
Tra le novità che l'HTML5 offre rispetto alle versioni precedenti vi è la possibilità di chiamare direttamente i contenuti multimediali tramite tag dedicati.
Precedentemente, l'inserimento di questo tipo di contenuti all'interno di una pagina HTML richiedeva, il più delle volte, l'utilizzo di applicativi esterni (e non standard) come Adobe Flash. L'alternativa a Flash era sottostare a condizioni fortemente restrittive per quanto riguarda la multimedialità, condizioni oggi inidonee a soddisfare le specifiche minime richieste da molti dei servizi del Web 2.0 (si pensi, ad esempio, a YouTube).
Con l'avvento dell'HTML5 queste caratteristiche sono integrate nel linguaggio. I principali tag che interessano la multimedialità sono:
- <audio>
- <video>
Il tag <audio>
Il tag <audio> definisce tutto cio che ha a che fare con il sonoro come, ad esempio, la musica o altri suoni.
Oltre agli attributi standard (il cui elenco è facilmente reperibile in Rete, ad esempio sul sito w3cschools.com) il tag audio supporta le seguenti proprietà specifiche:
- autoplay: se questo attributo è presente, la riproduzione del file audio partità automaticamente;
- controls: se dichiarato, verranno visualizzati i controlli, ad esempio i pulsanti Play e Stop;
- loop: se utilizzato, determina il loop (la ripetizione) del file musicale una volta terminato;
- preload: se presente, il file audio verrà precaricato al caricamento della pagina, in modo tale da essere pronto per una riproduzione senza attese. Se l'attributo autoplay è stato dichiarato, preload viene ignorato;
- src: specifica la URL del file audio da riprodurre.
<audio src="driin.ogg" autoplay="autoplay" controls="controls"> Il tuo browser non supporta l'audio gestito con HTML5. </audio>Il tag <audio> supporta anche la possibilità di gestire più di un sorgente; in tal caso si omette l'attributo src e si annidano, all'interno del tag <audio>, dei tag <source> in questo modo:
<audio controls="controls"> <source src="canzone1.ogg" type="audio/ogg"> <source src="canzone2.mp3" type="audio/mpeg"> Il tuo browser non supporta l'audio gestito con HTML5. </audio>Nota: attualmente i formati audio supportati sono mp3, wav e ogg.
Di seguito uno screenshot realizzato con Firefox:
