21. Àudio, vídeo i altres objectes

 

Índex

Objectes

Limitant-nos als elements vistos fins ara, l'organització jeràrquica dels elements d'un document HTML condueix finalment a un text o a una imatge. Les imatges són un cas particular dels anomenats objectes; també són objectes els arxius portadors de so, les animacions i d'altres. Dediquem aquest capítol a ocupar-nos-en.

L'HTML5 posa a disposició del programador quatre eines per a la inserció d'àudios i vídeos:

Els dos darrers són d'ús general.

L'ús d'aquestes eines és força problemàtic, ja que cal tenir presents molts factors alhora:

La situació és molt canviant. La descripció que es fa aquí correspon al novembre de 2111, i corre el risc d'esdevenir ràpidament obsoleta, no necessàriament en sentit poisitiu.

 

L'element AUDIO

L'ús de l'element <audio> és molt simple:

Les principals especificacions són controls, que fa visibles els botons d'inici i de pausa, autoplay, que fa començar automàticament la reproducció del so, i loop, que fa que el so, en arribar al final, torni a començar.

Exemple

 

L'element VIDEO

L'ús de l'etiqueta VIDEO és anàleg al de l'anterior:

En aquest cas, les principals especificacions són controls, que fa visibles els botons d'inici i de pausa, autoplay, que fa començar automàticament la reproducció del vídeo, loop, que fa que el vídeo, en arribar al final, torni a començar, i poster, que remet a una adreça que contingui una imatge de presentació del vídeo. Si es desitja escalar el vídeo, poden afegir-s'hi valors de height i width, que cal procurar que siguin coherents.

Exemple

 

L'element EMBED

L'element EMBED és vàlid indistintament per a arxius de so i vídeos. El seu ús és antic, però havia estat refusat tant per les especificacions HTML 4 com XHTML 1; l'HTML 5 finalment l'ha acceptat.

S'hi admeten, entre d'altres, els atributs autoplay, hidden i loop.

Exemple

 

L'element OBJECT

El element <object> està orientat a introduir en un document HTML un objecte, entenent com a tal una imatge, un arxiu de so, un vídeo, un applet i fins i tot un document HTML. En el primer cas fa pràcticament la mateixa funció que <img>; en el darrer, la mateixa funció que <iframe>.

L'estructura bàsica d'OBJECT és la següent:

Els atributs bàsics d'object són type, data, width i height. L'ús dels paràmetres depèn del tipus d'objecte.

Exemple

Alguns navegadors no reconeixen l'estructura suara indicada, i exigeixen que alguns atributs siguin indicats en forma de paràmetre. Com que el W3C dóna un gran marge de llibertat a l'ús dels paràmetres, s'ha establert una estructura redundant en què alguns atributs són indicats dues vegades.

Una altra alternativa és l'ús combinat dels elements OBJECT i EMBED.

Ho veurem exemplificat en el que segueix.

 

Els vídeos .swf

Els fitxers de Flash, que tenen la terminació .swf, combinen imatges vectorials i de mapes de bits, fixes o en moviment, i sons, poden captar animacions exteriors d'altres tipus i a més permeten la interactivitat amb l'usuari.

La immensa majoria dels banners que es troben en els documents HTML tenen el format .swf.

Els documents de Flash s'elaboren amb un programa específic de l'empresa Adobe (que va absorbir l'empresa creadora del producte, Macromedia). Es creen amb un programa de pagament, anomenat precisament Flash i són interpretades per un programa de distribució gratuïta.

Els arxius .swf sovint s'insereixen en una estructura combinada d'OBJECT i EMBED:

Exemple

Però també és possible inserir-los amb l'element OBJECT només:

Exemple

 

Presentació de vídeos amb programes intermediaris

El swfobject.js és un programa de JavaScript, de distribució gratuïta, capaç de controlar la presentació de vídeos .swf.

Exemple

Els programes .swf són capaços d'incorporar altres programes gràfics d'altres formats. Això ha portat al desenvolupament d'eines com el mediaplayer.swf; la combinació d'aquest amb el swobject.js és una forma molt habitual de presentació dels arxius .flv. Els documents .flv (o de Flash Video) ocupen un lloc de privilegi en la distribució de vídeo. Aquest format i combinacions anàlogues a les que esmentem han estat adoptades per YouTube, Google Video, Yahoo! Video i molts mitjans de comunicació (premsa electrònica i televisió per Internet).

Exemple

I en general, la combinació de mediaplayer.swf i swobject.js es pot fer servir per a la inserció de molts altres formats.

Exemple

 

Applets de Java

El llenguatge Java fou desenvolupat per Sun Microsystems. Deriva dels llenguatges C i C++, dels quals és una simplificació i alhora una millora. Els programes escrits en Java actuen independentment de la plataforma; només cal que l'ordinador disposi de l'intèrpret corresponent, l'anomenada màquina virtual de Java.

Un applet és un programa escrit en llenguatge Java destinat específicament a ésser inserit en un document HTML. Es designen amb la terminació .class; també hi ha paquets formats per diversos fitxers; en aquest cas la terminació és .jar. Avui tots els navegadors porten incorporat el programari necessari per a l'execució dels applets. Després d'uns inicis molt prometedors, el applets han caigut força en desús, però tenen encara un paper molt destacat en programes detinats a la realització de càlculs numèrics o gràfics complicats.

S'han d'inserir en el document mitjançant <object>, amb l'estructura següent:

Els paràmetres són code, que és el nom de l'applet (fitxer .class, archive, que és el nom de l'arxiu .jar que el conté (juntament amb recursos annexos). Hi ha, a més, paràmetres epecífics, establerts per a cada applet en particular.

Exemple

Inicialment es feia servir

però l'element applet no pertany a l'estàndard del W3C.

 

Objectes vinculats

La relació entre els objectes i els documents HTML pot ésser de dues menes: inserció - la que hem vist fins ara - i vinculació.

Un objecte vinculat és unit a un document HTML simplement mitjançant un hipervincle:

En fer clic a l'hipervincle es presenta el nou document en la mateixa finestra on hi havia l'anterior, al qual substitueix; i si fem servir l'atribut target) es presenta en una de nova. Vegem-ne primer un d'àudio:

Exemple

I ara un de vídeo:

Exemple

 

 

Curs de Flash 5 i MX

 
Podeu consultar el curs de Flash 5 i MX a Curs elemental de Flash