Sino ad oggi, l'inserimento di contenuti multimediali all'interno
delle pagine web è stato molto complicato, se non avvalendosi di speciali
plugin sviluppati da terze parti (citiamo, per esempio, Adobe Flash,
Microsoft Silverlight ed Apple QuickTime).
Oggi svilupperemo un player video con HTML5 e
l'ausilio anche di Javascript.
Le specifiche HTML5 introducono il supporto
integrato agli audio e
ai video attraverso i tag <audio> e <video>, offrendo la
possibilità di incorporare facilmente elementi multimediali nelle pagine HTML.
Il tag <video>, consente dunque di inserire direttamente nell'HTML della nostra pagina un
elemento di tipo video e permette di controllarne la riproduzione attraverso il JavaScript.
È supportato da browser quali Firefox, Chrome ed Internet Explorer 9, dove,
grazie al nuovo engine realizzato da Microsoft, possiamo sfruttare l'accelerazione grafica
vantando una performance significativa. I formati video supportati sono MPEG4, Ogg e WebM.
Quest'ultimo è la soluzione che Google ha deciso di proporre per i video sul web,
pur non essendo ancora parte delle specifiche HTML5, si
contrappone fortemente a Flash, su YouTube sono già disponibili alcuni video
in formato WebM.
Analogamente, nel caso del tag <audio>, HTML5 supporta al momento tre formati:
Ogg Vorbis, MP3 e WAV, fornendo agli sviluppatori uno strumento
nativo per la riproduzione audio.
Bastano poche righe di codice, e soprattutto senza creare alcun oggetto:
<audio src="http://../audio1.ogg" controls preload></audio>In questo caso il browser visualizzerà un player audio dalla grafica
assolutamente pari ai plugin sino ad ora utilizzati nei siti web.
Vediamo nello specifico come implementare un player video attraverso le API Javascript fornite
dagli elementi MEDIA dell'HTML5, realizzando l'interfaccia grafica con CSS3.
Inseriamo il tag video in una pagina HTML:
<video id="listaVideo" width="320" height="240" controls="controls" poster="images/img1.jpg" autoplay="true">
<source id="ogg" src="nomevideo.ogg" type="video/ogg" />
<source id="mp4" src="nomevideo.mp4" type="video/mp4" />
<source id="webm" src="nomevideo.webm" type="video/webm" />
Il tuo browser web non supporta la tag video di HTML5.
//Messaggio visualizzato nel caso in cui il browser non supporta questi formati
</video>Sicuramente non è la prima volta che incontrate questo tag, ma per quelli che non sviluppano in HTML5,
la proprietà src indica la path del video da riprodurre, mentre la proprietà autoplay imposta
l'avvio automatico del file, per finire poster indica la path dell'immagine da mostrare prima della riproduzione del filmato.
Settando la proprietà controls chiediamo al player di mostrare i controlli per playpause
e volume, mentre con height e width impostiamo le dimensioni.
Altre proprietà interessanti sono per esempio loop per non interrompere il ciclo di riproduzione il video,
preload per stabilire il tipo di preload che il browser fa del video, none nessun preload,
metadata solo i metadati, auto il browser avvierà il download dell'intero file.
Il vantaggio di lavorare con un tag e non su un oggetto compilato, prima che la pagina
passi al browser, è offrire ai programmatori la possibilità di accedere ai metodi ed alle proprietà dell'elemento via
JavaScript, semplicemente utilizzando
Relativamente al tag <video>, a cui
abbiamo assegnato id="listaVideo" saremo in grado di eseguire il
metodo play() sull'elemento per far partire il video:
var video = document.getElementById("listaVideo");
video.play();Stesso procedimento per mettere in pausa il filmato,
mandare avanti o indietro di un intervallo di tempo la sequenza temporale o
magari aumentare e diminuire il volume audio durante la riproduzione, lanciando
i metodi messi a nostra disposizione dalle Media API:
video.pause();
video.currentTime+=10;
video.currentTime-=10;
video.volume+=0.1;
video.volume-=0.1;Realizzare ora un'interfaccia gradevole con un form e dei bottoni, intercettando su di essi il click per scatenare gli
eventi appena citati. Facciamo uso di CSS3 per dare ai pulsanti
un stile web2.0, dando la possibilità all'utente di scegliere il video da riprodurre:
<button class="" onclick="riproduciVideo(0);">Video1</button>
<button class="" onclick="riproduciVideo(1);">Video2</button>
<button class="" onclick="riproduciVideo(2);">Video3</button>A questo punto creiamo un array con le url dei video da riprodurre, modificando la proprietà src dell'elemento
con la seguente funzione javascript:
function init() {
var videos = new Array();
videos[0] = [
"video/kungfu.mp4",
"video/kungfu.webm"
];
videos[1] = [
"video/rio.mp4",
"video/rio.webm"
];
videos[2] = [
"video/releone.mp4",
"video/releone.webm"
];
}
function riproduciVideo(n) {
var mp4 = document.getElementById("mp4");
var webm = document.getElementById("webm");
mp4.setAttribute("src", videos[n][0]);
webm.setAttribute("src", videos[n][1]);
video.load();
}La creazione del nostro player video è terminata, visualizza la demo:
Figura 2 - Player Video HTML5
(clic per ingrandire)
Conclusioni
Sfruttare le potenzialità dell'HTML5 per includere
contenuti multimediali nelle pagine web, slegati dalla tecnologia Flash, è
sicuramente un buon punto di partenza per creare siti web fruibili e facilmente
indicizzabili dai motori di ricerca. Seguendo le orme di Apple che ha da tempo
voluto "defenestrare" Flash dai suoi prodotti, rientriamo negli
standard W3C e valorizzando validi prodotti open source al pari delle risorse
sino ad oggi utilizzate.
Possiamo inoltre avvalerci del supporto di librerie Javascript come
MediaElement.js
o Jilion che semplificano la scrittura del codice.
Unica limitazione è legata alle specifiche, non ancora definitive e incomplete,
ma molti browser hanno già iniziato ad adeguare i loro parser al nuovo linguaggio
e sfruttano in qualche modo le nuove API. È possibile dunque trovarsi di fronte a problemi
di incompatibilità a seconda del browser che utilizzate, ma non sarebbe certo la prima volta
per chi sviluppa web.
