Guida HTML5: i tag audio e video (parte1)

Nel corso del tempo Internet ha subito un notevole cambio di direzione. Mentre alla sua nascita era un mezzo su cui viaggiava prevalentemente la divulgazione di testi scientifici, oggi viene utilizzato sempre più per scopi commerciali o ludici.

L’esponenziale crescita di portali come YouTube ha incrementato la richiesta e lo sviluppo di plugin esterni, come Flash, in grado di supportare elementi multimediali quali file audio e video all’interno delle pagine HTML.

Durante lo sviluppo dell’HTML5 è quindi apparso fondamentale affrontare il tema e creare un supporto nativo, consapevoli del fatto che il 90% del traffico ormai riguarda contenuti multimediali. I tag <audio> e <video>, di cui discuteremo nel corso di questo capitolo e del prossimo articolo,  sono stati creati proprio per sopperire a questo gap.

Alcune considerazioni

Se non volessi utilizzare l’HTML5, vi sono alcune strada da seguire per integrare contenuti multimediali all’interno della nostra pagina.

Potremmo, ad esempio, scegliere di utilizzare il tag <embed> il quale, attraverso il supporto di Windows Media Player o Apple QuickTime, aggiungerà un player all’interno del sito. Purtroppo questa tecnica non ci permette di controllare numerosi aspetti: non possiamo gestire il buffering e non possiamo sapere se il nostro file sarà riproducibile su tutti i browser e su tutti i sistemi operativi.

Il secondo approccio, invece, passa attraverso l’utilizzo di plugin esterni quali Adobe Flash o Microsoft Silverlight. Anche in questo caso, però, vi sono alcuni sinistri aspetti da dover considerare!

Prima di tutto la decisione di Apple di escludere Flash dai propri dispositivi mobile quali iPad e iPhone e, in secondo luogo, la necessità di scrivere una grande e poco gradevole porzione di codice all’interno del tag <object> o <embed>.

Formati e compatibilità

Prima di affrontare la pratica, bisogna dedicare un paio di righe alla fondamentale questione dei formati e della compatibilità. È necessario, infatti, avere chiaro che non esiste un vero e proprio formato standard sul web e che quindi, ogni browser si comporta in maniera differente.

Cerchiamo, prima di tutto, di riassumere i principali formati che è possibile utilizzare:

formato descrizione estensione mime type
mp3 il formato audio più popolare al mondo.
non viene, tuttavia, adottato da piccole aziende come Firefox e Opera a causa degli alti costi di licenza
.mp3 audio/mp3
ogg vorbis un formato comparabile alla qualità del mp3 ma free .ogg audio/ogg
wav non usa compressione quindi spesso è inadatto ad essere usato sul web .wav audio/wav
H.264 lo standard video per eccellenza, particolarmente usato per l’hd .mp4 video/mp4
ogg theora nonostante non sia qualitativamente comparabile al h264, questo standard free, soddisfa parte della clientela .ogv video/ogg
webm formato free creato da Google. Rappresenta il maggior competitor dei h264 .webm video/webm

Adesso che conosciamo sommariamente le differenze tra i vari formati, possiamo comparare il supporto che i browser dedicano ad essi tramite le comode tabelle riportate su w3c schools, rispettivamente per video e audio.

Ci appare quindi chiara la necessità di utilizzare contemporaneamente più di un formato per coprire interamente il panorama di browser e sistemi operativi ai quali ci rivolgiamo. Ciò può essere ottenuto tramite l’utilizzo del tag <source> che va racchiuso all’interno dei tag <audio> e/o <video>. Vedremo, più avanti, come utilizzarlo nel dettaglio.

Audio

Questa volta partiamo dalla pratica per arrivare alla teoria. Prendiamo come esempio questa semplice porzione di codice:

<p>Ascolta il verso del cane</p>
<cite>il verso del cane si chiama ‘abbaiare’</cite>
<audio src=”audio/bark.mp3” controls></audio>

Come possiamo vedere c’è una netta somiglianza con l’inserimento di un’immagine.

Anche in questo caso, infatti, disponiamo di un attributo src che indicherà la posizione del file che andremo a riprodurre. L’attributo controls, invece, indica al browser di mostrare il player predefinito con i relativi controlli.

In Google Chrome, ad esempio, il codice appena scritto apparirà così:

Schermata 2014-05-19 alle 12.08.20

Il tag audio supporta tre attributi oltre controls: preload, autoplay e loop.

Come possiamo facilmente intuire, l’attributo loop serve a riprodurre il suono in maniera continuativa.

La sintassi risulterà essere:

<audio src=”audio/bark.mp3” controls loop></audio>

L’attributo preload, invece, informa il browser su come gestire il download.

Ad esempio, il valore auto invoca il download del file audio il prima possibile rendendolo già disponibile al click dell’utente.

Il valore metadata invece carica immediatamente solo i dati estraibili dal file, come la durata totale.

Infine, il valore none, impedisce il preload e può essere utile se pensiamo che il file possa essere riprodotto da un esigua fascia di utenti e quindi vogliamo evitare di appesantire il caricamento della pagina inutilmente.

Ecco un esempio in codice, di come si presentano tutti i possibili valori:

<audio src=”audio/bark.mp3” controls preload=”auto”></audio>
<audio src=”audio/bark.mp3” controls preload=”metadata”></audio>
<audio src=”audio/bark.mp3” controls preload=”none”></audio>

L’attributo autoplay, come suggerisce il nome, permette al file di essere riprodotto automaticamente senza che il click dell’utente si renda necessario. Il codice apparirebbe, in questo caso, così:

<audio src=”audio/bark.mp3” controls autoplay></audio>

Utilizzando il tag <source> (per i motivi accennati nella sezione ‘formati e compatibilità’) possiamo utilizzare più formati:

<audio controls>
	<source src=”audio/bark.mp3” type=”audio/mp3”>
	<source src=”audio/bark.ogg” type=”audio/ogg”>
</audio>

In questo modo Firefox ed Opera faranno riferimento al file .ogg, mentre Internet Explorer, Chrome e Safari terranno in considerazione il formato .mp3.

Conclusione

Come consuetudine, potete scaricare l’archivio zip di questa lezione contenente tutti gli esempi e il relativo codice completo.

Durante il prossimo capitolo affronteremo il tag <video> nello stesso modo in cui, quest’oggi, ci siamo occupati dell’audio.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker

Tag: , ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • Guida HTML5: i tag audio e video – parte 2

    Nello scorso articolo abbiamo parlato degli enormi progressi che ha compiuto l’HTML5 per consentire un maggiore supporto agli elementi multimediali...

  • Guida CSS3: introduzione e selettori

    Benvenuto! Quest’oggi inauguriamo un nuovo filone di articoli che andrà, progressivamente, a formare un’esaustiva guida ai CSS3. Poiché in...

  • Guida HTML5: Web storage

    Durante lo scorso articolo abbiamo definitivamente chiuso la sezione dedicata al Canvas. Oggi passiamo, quindi, a occuparci di un’altra fondamentale...

5 commenti

Trackback e pingback

  1. Guida HTML5: i tag audio e video – parte 2 | Your Inspiration Web
    […] volta ripassata la scorsa lezione, siamo pronti ad […]
  2. Guida HTML5 : i player video | Your Inspiration Web
    […] HTML5: i form – Parte 2 8)Guida HTML5: i form – Parte 3 9)Guida HTML5: i form – Parte 4 10)Guida…
  3. Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
    […] i form – Parte 2 8) Guida HTML5: i form – Parte 3 9) Guida HTML5: i form – Parte 4…