Il linguaggio HTML consente di gestire, all’interno delle pagine web, elementi multimediali come file audio e video.
Si pensi, ad esempio, uno store di musica online che permette di ascoltare le anteprime delle canzoni che si intendono acquistare, oppure una testata giornalistica che permette di vedere determinati servizi video, oppure ad una TV online o servizi di streaming (come ad esempio YouTube).
In un caso, nell’altro, o nell’altro ancora, diciamo semplicemente che l’HTML permette la gestione di elementi multimediali all’interno delle pagine web attraverso una serie di tag che, in questa lezione della nostra guida, vedremo di illustrare.
Riprodurre file multimediali con HTML 4
La versione 4 di HTML invita all’utilizzo del tag <object> per la riproduzione di elementi multimediali come file audio e video. Quasi tutti i browser, tuttavia, offrono da sempre pieno supporto al tag <embed> che è finito col diventare uno "standard di fatto" per la riproduzione di file multimediali on-line. Per dovere di precisione è giusto sottolineare come questo tag non rientri nelle specifiche di HTML 4 pertanto, se utilizzato, rende non valido il documento da un punto di vista sintattico.
Il tag <bgsound>
Vediamo un esempio molto semplice di inserimento di una musica di sottofondo in una pagina Web:
<bgsound src="canzone.mp3" loop="1">Il tag bgsound supporta gli attributi src che specifica il nome ed il percorso del file audio in questione, e l’attributo loop che permette di specificare il numero di volte che il file musicale deve ripetersi quando arriva alla fine; accetta un valore numerico oppure il valore speciale infinite che itera il suono all’infinito, finchè ovviamente la pagina verrà chiusa.
E’ bene segnalare che il tag bgsound è decisamente obsoleto e non è cross-browser essendo compatibile solo con IExplorer e, come tale, viene riportato in questa lezione solo per dovere di completezza d’informazione e non perché possa avere un uso pratico.
Il tag <object>
Come detto, le specifiche di HTML 4 invitano all’utilizzo del tag <object> al fine di inserire "oggetti" all’interno dei documenti HTML. La sintassi di base di questo tag è la seguente:
<object data="nome_file.mp3" type="audio/mpeg"></object>Il tag in questione è corredato da due attributi fondamentali: data (che contiene il percorso verso il file multimediale che si desidera riprodurre nella pagina web) e type (che esplicita il MIME Type del file che si desidera includere nel documento HTML).
I MIME Type più comuni sono:
- Audio:
- audio/mpeg (file MP3)
- audio/ogg (file OGG)
- audio/vnd.wave (file WAV)
- audio/midi (file MIDI)
- Video:
- video/avi (file AVI)
- video/mpeg (file MPEG)
- video/quicktime (file QuickTime)
- video/webm (file WEBM)
- video/x-flv (Flash Video)
Quella vista qui sopra, è bene precisarlo, è la sintassi minimale del tag object, in quanto è possibile arricchire l’esperienza multimediale dell’utente aggiungendo nuove opzioni attraverso l’utilizzo dei tag <param>. Vediamo un esempio più completo nel quale sono gestite le opzioni autostart e loop:
<object data="nome_file.mp3" type="audio/mpeg">
<param name="autostart" value="true">
<param name="loop" value="false">
</object>Queste opzioni possono essere valorizzato come true/false a seconda che si desideri attivare o meno l’avvio automatico della riproduzione e l’effetto loop (cioè la riproduzione ciclica all’infinito).
Per motivi di compatibilità con vecchie versioni di IExplorer è suggerito utilizzare un terzo tag <param> (src) per specificare il sorgente del file multimediale: si tratta di una ripetizione del valore già specificato nell’attributo data del tag object.
<object data="nome_file.mp3" type="audio/mpeg">
<param name="autostart" value="true">
<param name="loop" value="false">
<param name="src" value="nome_file.mp3">
</object>Il tag <embed>
Il Tag da <embed> è diventato, come detto, uno standard di fatto per la riproduzione di file audio e video. Il suo utilizzo, infatti, è molto semplice e consente di visualizzare – all’interno di una pagina web – il player multimediale di default installato sui PC impostando determinate funzionalità attraverso una serie di attributi. Vediamo di seguito l’elenco degli attributi supportati dal tag embed (corredati da esempi):
Attributo "src"
Come per le immagini questo attributo serve a specificare l’indirizzo del file sonoro o video che si desidera riprodurre che, tra le varie estensioni supportate da questo plug-in, può essere di tipo:
- .mp3
- .wav
- .midi
- .rmi
- .mpeg (per i video)
- .avi (per i video)
e cosi via.
Tenete conto anche della dimensione del file che volete inserire: mi raccomando, perchè più "grosso" è e più tempo l’utente dovrà attendere per caricare il brano o il video da riprodurre.
Un esempio:
<embed <strong>src=</strong>"nome_file.mp3"></embed>Attributi "width" ed "height"
Impostano rispettivamente la larghezza e l’altezza del player.
Chi utilizza vecchie versioni del browser Internet Explorer vedrà apparire un player molto grande, rischiando di rovinare il layout della pagina. Allo scopo di evitare questo inconveniente è bene dare sempre delle misure al player; questo si fa nello stesso modo in cui si danno le dimensioni a tabelle, immagini, e cosi via, ossia aggiungendo al Tag gli attributi width ed height, le cui misure andranno espresse in pixel.
Tenete poi anche conto che le dimensioni di default del player sono diverse a seconda del browser, altro motivo per cui è consigliabile impostarne dei valori fissi.
Nota: per evitare di mettere misure troppo piccole, e "tagliare fuori" cosi il controllo del volume, impostare la larghezza dell’embed minimo a 280.
Facciamo un esempio che comprende la barra del volume:
<embed src="nome_file.mp3" <strong>width=</strong>"280" <strong>height=</strong>"45"></embed>Facciamo un secondo esempio che comprende solo i pulsanti PLAY e STOP:
<embed src="nome_file.mp3" <strong>width=</strong>"75" <strong>height=</strong>"45"></embed>Attributo "autostart"
Avrete notato che, accedendo ad alcune pagine web, la musica o un dato video si avviano automaticamente all’apertura della pagina. Ciò accade perchè l’attributo autostart è impostato di default a valore "true". Se volete invece che la riproduzione parta solo quando l’utente preme il bottone PLAY, impostate questo attributo a "false".
Facciamo un esempio:
<embed
src="nome_file.mp3"
width="280"
height="45"
<strong>autostart</strong>="false">
</embed>Attenzione: le specifiche dei browser oggi in circolazione disattivano di default i video ed i file audio in autoplay, pertanto l’attributo autostart, di fatto, non produce alcun risultato pratico.
Attributo "loop"
E’ possibile far si che la riproduzione del file si ripeta (o meno) all’infinito. Allo scopo dobbiamo chiamare in causa l’attributo loop.
Se impostato a 1 (o true) farà si che una volta terminata la riproduzione questa ricominci da capo automaticamente, all’infinito. Altrimenti, di default, loop assume valore 0 (o false), e una volta eseguito la riproduzione del file il player si fermerà.
Ad esempio:
<embed
src="nome_file.mp3"
width="280"
height="45"
autostart="false"
<strong>loop</strong>="1">
</embed>Attributo "hidden"
Potete anche far si, volendo, che il player non venga visualizzato, impostando l’attributo hidden al valore "true" (il valore di default, com’è intuibile, è "false"). Ovviamente una simile impostazione può avere senso solo per i file audio e non certo per i video: può essere utile, ad esempio, se volete mettere un sottofondo musicale al sito. Ricordatevi però in questo caso di settare l’attributo "autostart" a "true", in modo da far partire il brano in automatico, in quanto l’utente, non vedendo il player, non potrà interagirvi in alcun modo.
Un esempio:
<embed
src="nome_file.mp3"
autostart="true"
loop="1"
<strong>hidden</strong>="true">
</embed>Il Tag "noembed"
Come accennato nel paragrafo introduttivo, c’è da dire anche che <embed>, seppur ben supportato, non è compatibile con tutti i browser; ecco perchè è bene aggiungere, subito dopo la chiusura </embed>, il Tag <noembed>, il cui scopo è fornire un testo alternativo in caso di mancato supporto.
Segue un esempio:
<embed src="nome_file.mp3"></embed>
<noembed>Elemento multimediale non supportato!</noembed>Utilizzo congiunto di <object> e <embed>
Di frequente i due tag descritti in questa pagina sono tilizzati congiuntamente al fine di ottenere una piena compatibilità cross-browser. Per farlo si utilizza il tag embed annidiato all’interno di object in questo modo:
<object data="nome_file.mp3" type="audio/mpeg">
<param name="autostart" value="true">
<param name="loop" value="false">
<param name="src" value="nome_file.mp3">
<embed src="nome_file.mp3" autostart="true" loop="false"></embed>
</object>Gestire la riproduzione di file multimediali con HTML5
Con l’avvento di HTML5 la riproduzione di file multimediali non è più ad appannaggio dei tag <object> ed <embed> i quali, da fatto, sono stati soppiantati da nuove specifiche del linguaggio.
Tra le novità che l’HTML5 offre rispetto alle versioni precedenti, infatti, vi è la possibilità di chiamare direttamente i contenuti multimediali tramite tag dedicati. I principali tag che interessano la multimedialità sono <audio> e <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 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:
Il tag <video>
Il tag <video> definisce tutto cio che ha a che fare con la riproduzione visiva, come la le animazioni, i filmati o in generale un qualsiasi stream video.
Come nel caso del tag audio il tag video supporta gli attributi standard ed alcuni attributi dedicati:
- autoplay: se questo attributo è presente, la riproduzione del filmato partità automaticamente;
- controls: se dichiarato, verranno visualizzati i controlli, ad esempio i pulsanti Play e Stop;
- height: permette di specificare l’altezza in pixel del riproduttore video;
- loop: imposta la riproduzione continua. Al termine dell’esecuzione il filmato viene riprodotto da capo ciclicamente;
- poster: con questo attributo è possibile definire la URL di un’immagine da mostrare prima e/o dopo la riproduzione del video o, comunque, quando il filmato non è disponibile;
- preload: se presente, il filmato 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 flusso video da riprodurre;
- width: permette di specificare la larghezza in pixel del riproduttore video.
Di seguito un esempio:
<video src="filmato.ogg" controls="controls">
Il tuo browser non supporta i contenuti video HTML5.
</video>Come per il tag <audio>, anche <video> supporta la possibilità di gestire più di un filmato; la sintassi è la medesima del tag <audio>:
<video controls="controls">
<source src="filmato1.ogg" type="video/ogg">
<source src="filmato2.mp4" type="video/mp4">
Il tuo browser non supporta i contenuti video HTML5.
</video>Di seguito uno screenshot realizzato con Firefox:
File multimediali e prestazioni
E’ bene ricordare, infine, che il browser, per poter riprodurre un file multimediale (audio o video che sia) deve prima scaricarlo. L’utilizzo dei tag presentati, quindi, deve essere attentamente soppesato in quanto potrebbe rallentare la navigazione dell’utente in base alla qualità della connessione e del peso del file multimediale che si vuole includere nella pagina.
Inserire video di Youtube, Vimeo o Facebook
All’interno delle nostre pagine web è possibile incorporare file video provenienti da sorgenti esterne come YouTube, Vimeo o Facebook. In questo caso l’inclusione del video avviene mediante il semplice copia e incolla del codice di condivisione che, il più delle volte, si basa sull’utilizzo di un semplice <iframe>.
