Àudio i vídeo¶
Un dels avantatges de la versió HTML5 és que permet incloure a les nostres pàgines web fitxers d’àudio i vídeo amb la mateixa facilitat amb la qual es podien incloure imatges a les versions anteriors de HTML. Si bé és cert que no tots els navegadors suporten encara tots els formats, aquestes etiquetes permeten incloure la mateixa informació codificada de diferents formes, de manera que el navegador puga triar una d’elles i descartar les que no suporte.
Contenidors i còdecs¶
Alguns fitxers de vídeo tenen l’extensió AVI o MP4, de la mateixa manera que els de àudio tenen les extensions MP3 o OGG. En realitat en el cas dels vídeos és més complicat, ja que en el cas d’un fitxer de so sabem exactament com està codificada la informació al seu interior, però els fitxers de vídeo son contenidors multimèdia, dins dels quals pot haver informació de vídeo, una o més pistes de àudio i altres tants subtítols, que a més poden estar codificats de diferents maneres. Alguns dels contenidors de vídeo més utilitzats són MPEG4, Flash Video, Ogg, WebM, Matroska i Audio Video Interleave.
Dins d’aquestos contenidors la informació de vídeo es troba generalment comprimida amb un còdec. Els còdecs s’encarreguen de codificar una determinada informació, en aquest cas amb la finalitat de que aquesta ocupe menys espai. Alguns còdecs realitzen aquesta tasca sense pèrdua d’informació, però altres aconsegueixen una major compressió a canvi de perdre una mica de qualitat.
Alguns dels còdecs de vídeo més utilitzats són els següents:
MPEG-4, també conegut com H.264, i una versió inicial va ser anomenada DivX. Aquest és un còdec àmpliament utilitzat, fins i tot en telèfons mòbils i reproductors de saló, però el seu ús està restringit per patents.
Theora és un format de vídeo lliure de regalies i patents, desenvolupat per la Xiph.org Foundation a partir del còdec VP3. Encara que aquest còdec es pot utilitzar amb qualsevol tipus de fitxer contenidor, es troba generalment als fitxers Ogg.
VP8 és un còdec de vídeo desenvolupat per On2. Google va comprar aquesta companyia i va alliberar el còdec per a que qualsevol el puga utilitzar sense haver de pagar regalies ni negociar patents.
Exactament igual que els còdecs de vídeo, els de àudio serveixen per a emmagatzemar la informació ocupant menys espai, de vegades amb una lleugera pèrdua de qualitat front al so original. Alguns dels còdecs de àudio més utilitzats són:
MPEG-1 Audio Layer 3, conegut com MP3. Aquest és un estàndard de gran èxit comercial, però protegit per patents, per la qual cosa alguns programes lliures no poden utilitzar aquest còdec sense afegits externs.
Advanced Audio Coding, conegut per les seues sigles AAC. Aquest és un còdec protegit per patents que va ser triat per Apple com format per defecte per a iTunes. Aquest còdec té una qualitat major que el MP3, i suporta múltiples canals, per la qual cosa resulta més adequat per a un so de sis o més altaveus.
Vorbis. Vorbis és un còdec amb una qualitat comparable a AAC, i que també suporta múltiples canals, però lliure de patents i regalies. Es pot trobar freqüentment en fitxers contenidors WebM i Ogg.
Arribats a aquest punt supose que han quedat clares al menys un parell de coses: que no tots els navegadors suporten tots els formats i que existeixen moltíssimes possibles combinacions de fitxers contenidors i còdecs de vídeo i àudio per una mateixa informació. Açò fa que seleccionar com codificarem la nostra informació siga una tasca delicada, de la qual depèn que un vídeo puga ser visualitzat o no.
En el seu llibre «Dive into HTML5» Mark Pilgrim recomana fer tres versions dels nostres vídeos:
Contenidor WebM, còdec de vídeo VP8 i còdec de àudio Vorbis.
Contenidor MP4, còdec de vídeo H.264 i còdec de àudio AAC.
Contenidor Ogg, còdec de vídeo Theora i còdec de àudio Vorbis.
Noteu que l’opció 2 utilitza còdecs protegits per patents, la qual cosa significa que, en la pràctica, encara que tingueu tots els drets de propietat sobre els vídeos que difongueu per la web, algú podria venir a reclamar-vos una compensació econòmica per utilitzar patents de la seua propietat.
Per als exercicis de classe podeu utilitzar la primera o la tercera opció, actualment suportades per Firefox i la major part de navegadors.
Àudio¶
Incloure un fitxer de so a la nostra pàgina web és molt simple:
<audio src="arxiu.mp3" ></audio>
Nota
En aquest cas, i en el de l’etiqueta <video>, el validador donarà error si no utilitzem l’etiqueta de tancament </audio> encara que, en realitat no hi ha res al seu interior.
Dins l’etiqueta audio podem incloure alguns atributs per modificar el seu comportament:
autoplay La reproducció del fitxer començarà automàticament quan es carregue la pàgina.
controls El navegador mostrarà els controls de reproducció. Si aquest atribut no està present l’element audio és invisible.
loop El navegador reiniciarà la reproducció cada vegada que aquesta acabe.
Per utilitzar més d’un fitxer per a un únic element audio ho farem amb l’element source de la següent manera:
<audio controls>
<source src="arxiu.ogg" type="audio/ogg">
<source src="arxiu.mp3" type="audio/mp3">
<source src="arxiu.wav" type="audio/wav">
</audio>
El navegador utilitzarà automàticament un dels fitxers suportats, i ignorarà la resta.
Vídeo¶
El funcionament de l’etiqueta vídeo és molt similar al de l’etiqueta audio, però en aquest cas la varietat de fitxers que es poden utilitzar és molt major.
Com a mínim haurem d’utilitzar el següent codi:
<video src="arxiu.webm"></video>
Igual que fèiem amb l’àudio, podem utilitzar diferents fitxers. Com que els tipus de contenidors i còdecs varien d’un navegador a altre i no sabem quin utilitzaran els nostres visitants triar diferents combinacions i utilitzar-les és més important que en el cas dels fitxers d’àudio.
<video>
<source src="arxiu.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="arxiu.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Com pots comprovar l’atribut type és una mica complicat, ja que cal especificar el contenidor i els còdecs utilitzats.
Finalment alguns atributs que es poden utilitzar dins l’etiqueta video:
autoplay La reproducció del fitxer començarà automàticament quan es carregue la pàgina.
preload El navegador descarregarà automàticament el vídeo, però no iniciarà la seua reproducció.
controls El navegador mostrarà els controls de reproducció.
loop El navegador reiniciarà la reproducció cada vegada que aquesta acabe.
Un exemple una mica més complet:
<video autoplay controls muted>
<source src="arxiu.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="arxiu.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Els atributs dels vídeos i àudios en el CSS¶
Dins del nostre fitxer CSS podem crear regles per als vídeos i àudios, en les quals controlar els atributs que ja hem utilitzat anteriorment: alçària, amplària, marges, vores, padding, posicionament, etcétera.