HTML5 Media API – video e audio

15 settembre 2011

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.

Figura 1 – Controlli Player Audio HTML5

Controlli Player Audio HTML5

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 play\pause 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 getElementById(). 

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)

Player Video HTML5

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.

Se vuoi aggiornamenti su HTML5 Media API – video e audio inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su HTML5 Media API – video e audio

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy