HTML5 introduce due elementi appositamenti creati per facilitare l’inserimento di contenuti multimediali con l’obiettivo dichiarato di colmare le lacune sul tema presenti nella precedente specifica; appartengono alla categoria dei media elements:
- video
- audio
Sono strettamente legati ai media elements i seguenti elementi:
- source
- track
Definizione formale di media element
I media elements (elementi multimediali) sono utilizzati per presentare all’utente filmati e files audio.
Definizione formale di media resource
Il termine media resource (risorsa multimediale) si riferisce al file multimediale nel suo complesso, un file video completo od un file audio completo. Una risorsa multimediale può contenere files audio multipli così come tracce video multiple. Dal punto di vista del media element la risorsa multimediale è semplicemente (nel caso di un video) la traccia selezionata correntemente; allo stesso modo se la risorsa è un file audio la risorsa multimediale è il risultato del mix di tutte le tracce (audio) correntemente selezionate.
È interessante notare come entrambi gli elementi possano riprodurre files video e audio. La differenza risiede nell’assenza nel tag audio di una area dedicata alla riproduzione dell’immagine ed all’inserimento di didascalie. Ambedue espongono delle APIs in modo che gli autori (programmatori) possano definire interfacce custom per le loro applicazioni, nel caso tale opportunità non venga sfruttata il failover atteso è l’utilizzo dell’interfaccia predefinita dello user-agent.
Sono definiti attributi comuni per entrambi gli elementi:
- src: la locazione della risorsa da riprodurre.
- crossorigin: enumerazione che può valere anonymous/use-credentials; utilizzata per richieste di risorse cross-domain.
- preload: enumerazione che può assumere i valori:
- none: indica (in buona sostanza) allo user agent che l’autore non richiede una alta priorità per la fruizione della risorsa
- metadata: indica allo user agent che l’autore non richiede una alta priorità per la fruizione della risorsa ma che ritiene ragionevole (in termini di traffico) ottenere informazioni come dimensioni, primo fotogramma, lista delle tracce, durata ecc.
- auto: suggerisce allo user agent che la risorsa può essere trasmessa all’utente senza alcun rischio per il server.
- autoplay: booleano; indica se la riproduzione debba essere iniziata automaticamente o no.
- mediagroup: può essere utilizzato per linkare risorse multimediali multiple (più di un file video/audio)
- loop: attributo booleano che, se specificato, indica se l’elemento debba "riavvolgere" la risorsa e farla ripartire dall’inizio una volta raggiunto il termine del contenuto.
- muted: attributo che indica lo stato di default dell’audio per una risorsa video.
- controls: attributo, se omesso, che indica allo user agent di farsi carico di mostrare l’interfaccia dei controlli per la risorsa. Per controlli si intendono soprattutto i classici tasti play/pause e la barra di avanzamento.
Iniziamo la descrizione puntuale dei due elementi partendo da video.
video
Definizione formale
L’elemento video è utilizzato per mostrare filmati, video e files audio con didascalia.
Il draft puntualizza che il tag può contenere testo ed informazioni ma afferma anche che questi non debbono essere mostrati dallo user-agent; qualora fossero presenti sarebbero definiti per indicare all’utente in possesso di un browser obsoleto vie alternative per fruire della risorsa multimediale.
Sono definiti per l’elemento oltre agli attributi comuni ad audio visti precedentemente:
- poster
- width
- height
In particolare poster deve contenere l’indirizzo di una immagine alternativa da caricare laddove il video non fosse disponibile. È consigliabile scegliere come poster frame una immagine rappresentativa del filmato in questione, in modo da dare immediata indicazione all’utente di quale argomento tratti la risorsa.
Tralascerò in questa sede le definizioni tecniche riguardanti stato del video e dimensioni, riportate nel draft, poichè esulano dagli scopi di questa guida essendo direttive destinate agli user-agents e non agli autori.
Un esempio minimale della sintassi:
<video src="filevideo.vid" autoplay></video>audio
Definizione formale
L’elemento audio rappresenta un suono o uno stream audio; può essere incluso del contenuto (testuale) all’interno dell’elemento. Gli user-agents non dovrebbero mostrare questo contenuto agli utenti, esso è presente al solo scopo di permettere ai vecchi browser di tentare il caricamento attraverso i plugin audio disponibili o di mostrare informazioni che descrivano vie alternative per accedere alla risorsa che si intende veicolare.
Un esempio minimale dell’utilizzo del tag audio:
<audio src="frank_sinatra-under_my_skin.mp3" preload="auto"></audio>È importante sottolineare che non tutti i formati sono supportati dai singoli browsers; la considerazione vale sia per i codecs audio quanto per quelli video; l’HTML5 Working Group auspica venga individuato almeno un formato universalmente supportato, i vari produttori tuttavia sembrano spingere in questa fase in direzioni diverse alimentando polemiche incrociate nei confronti delle scelte altrui.
Allo scopo di evitare inaspettati disservizi ed essere ragionevolmente sicuri di veicolare la risorsa di interesse è stato creato l’elemento source:
source
Definizione formale
L’elemento source permette all’autore di specificare delle alternative per le risorse definite in un elemento multimediale (audio, video). L’elemento definito al di fuori di questo contesto non ha alcun significato.
Come ben chiarito dalla specifica il tag source permette di definire un semplice meccanismo di failover qualora il browser non fosse in grado di leggere e riprodurre la risorsa definita per prima nella lista delle sources. Vediamo un esempio pratico di quanto detto:
<audio>
<source src="frankie.wav">
<source src="frankie.ogg">
Il browser non è in grado di riprodurre alcuno dei file indicati!
</audio>Notate il contenuto testuale fornito nel caso in cui entrambi i codecs non siano supportati. source si applica indistintamente ai tag audio e video.
Oltre all’attributo src (obbligatorio) la specifica aggiunge type per specificare il media type della risorsa:
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>track
Definizione formale
L’elemento track permette all’autore di specificare esplicitamente dei testi temporizzati per i media elements. Non ha alcun significato al di fuori di questo contesto.
L’elemento possiede i seguenti attributi:
- kind: enumerazione che può valere:
- subtitles: sottotitoli; traduzione dalla lingua originale, descrizione testuale in caso di audio poco comprensibile; mostrati come sovraimpressione.
- captions: simile a subtitles ma più orientato alla descrizione ed all’inserimento di informazioni sulla risorsa in esecuzione.
- descriptions: descrizione testuale del componente video quando questo non sia disponibile o poco chiaro.
- chapters: pensato per la navigazione interattiva nella risorsa.
- metadata: non visibile all’utente, pensato per essere fruito tramite script.
- src: indica la locazione dei dati testuali per la risorsa.
- srclang: obbligatorio quando kind si trovi in stato subtitle, indica la lingua in cui è veicolata la risorsa.
- label: fornisce il titolo della risorsa in modo comprensibile all’utente.
- default: se specificato indica che la traccia è quella attivata per default.
Esempio dell’utilizzo combinato con il tag video, riadattato da quello proposto nel draft:
<video src="discorso_di_gandhi.vid">
<track kind=subtitles src=discorso_di_gandhi.en.vtt srclang=en label="English">
<track kind=subtitles src=discorso_di_gandhi.it.vtt srclang=it lang=it label="Italiano">
<track kind=subtitles src=discorso_di_gandhi.fr.vtt srclang=fr lang=fr label="Francais">
</video>Il video in questione possiede quindi sottotitoli (osservate lo stato di kind) in tre lingue diverse. srclang in questo caso è obbligatorio.
