CAP. 12. PAGINI WEB MULTIMEDIA

12.1. Ce este multimedia?

Multimedia reprezintă tot ce puteţi auzi sau vedea: texte, cărţi, imagini, muzică, sunete, CD-uri, DVD-uri, filme, tot felul de înregistrări video sau audio etc.

Multimedia se prezintă într-o multitudine de formate, iar pe Internet veţi găsi multe dintre aceste elemente înglobate în pagini web. Browser-ele actuale oferă suport pentru multe dintre aceste formate, dar nu pentru toate.

Suportul pentru sunete, animaţii şi video este tratat în mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesită anumite plug-in-uri, în vreme ce altele pot solicita activarea anumitor controale ActiveX.

În acest capitol veţi afla despre diferitele formate multimedia şi cum să le folosiţi într-o pagină web.

Elementele multimedia (precum sunetele şi video) sunt stocate în fişiere media. Modalitatea cea mai simplă de a determina tipul unui fişier media este de a analiza extensia fişierului respectiv (de exemplu, cele mai utilizate tipuri de fişiere ce conţin imagini au extensia .jpg sau .gif).

12.2. Formatul fişierelor multimedia ce conţin sunete

Sunetele pot fi stocate în diferite formate de fişiere. Astfel deosebim:

a) Formatul MIDI

MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaţii muzicale între dispozitive electronice muzicale (precum sintetizatoare) şi plăcile de sunet ale calculatoarelor.

Formatul MIDI a fost implementat în 1982 de către industria muzicală. Acest format este foarte flexibil şi poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, până la crearea unora cu adevărat profesionale.

Fieşierele MIDI nu conţin sunete, ci un set de instrucţiuni digitale muzicale (note muzicale) care pot fi interpretate de plăcile de sunet ale calculatoarelor.

Dezavantajul la acest tip de fişiere constă în faptul că nu pot stoca muzică (în toată complexitatea ei), ci doar note muzicale.

Avantajul îl constituie mărimea mică a acestor fişiere, prin urmare se pot încărca uşor într-o pagină web, precum şi faptul că acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet.

Fişierele de tip MIDI au extensia .mid sau .midi.

b) Formatul RealAudio

Formatul RealAudio a fost dezvoltat pentru Internet de către Real Media. Acest format suportă chiar şi video.

Formatul permite difuzarea de informaţii audio (muzică on-line, Internet radio) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.

Fişierele de tip RealAudio au extensia .rm sau .ram.

c) Formatul AU

Acest formatul a fost dezvoltat de către Sun Microsystems şi este suportat de majoritatea sistemelor de operare.

Aceste fişierele au extensia .au.

d) Formatul AIFF

AIFF (Audio Interchange File Format) a fost dezvoltat de către Apple. Acest tip de fişiere nu sunt suportate de toate browser-ele.

Aceste fişierele au extensia .aif sau .aiff.

e) Formatul SND

SND (Sound) a fost dezvoltat, de asemenea, de către Apple şi au acelaşi dezavantaj, şi anume că nu sunt suportate de toate browser-ele.

Aceste fişierele au extensia .snd.

f) Formatul WAVE

WAVE (waveform) a fost dezvoltat de către IBM şi Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browsere-lor.

Fişierele de tip WAVE au extensia .wav.

g) Formatul MP3

Fişierele MP3 sunt de fapt fişiere MPEG, dezvoltate iniţial pentru video de către Moving Pictures Experts Group. Se poate afirma că fişierele MP3 reprezintă partea de sunet dintr-un fişiere video în format MPEG.

MP3 este în prezent unul dintre cele mai populare formate folosite la înregistrarea muzicii. Sistemul de codificare MP3 combină o bună compresie (ce duce la fişiere mici) cu calitate înaltă. Este de aşteptat ca pe viitor toate sistemele de operare să ofere suport pentru acest tip de format.

Fişierele de tip MP3 au extensia .mp3 sau .mpga.

În funcţie de scopul pentru care creaţi o pagină web multimedia va trebui să vă orientaţi şi asupra unui anumit format de fişier. Astfel, dacă doriţi ca sunetele înregistrate (muzică sau de alt tip) să poată fi asculatet de toţi vizitatorii paginii web, atunci trebuie să folosiţi fişiere în format WAV, întrucât este cel mai popular format pe Internet şi este suportat de majoritatea browsere-lor.

Dacă pagina web este despre înregistrări muzicale, atunci formatul cel mai potrivit este MP3.

12.3. Formatul fişierelor multimedia ce conţin video

Şi imaginile video pot fi stocate în diferite formate de fişiere. Astfel deosebim:

a) Formatul AVI

Formatul AVI (Audio Video Interleave) a fost dezvoltat de către Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browsere-lor. Deşi este un format des întâlnit pe Internet, nu este întotdeauna suportat de calculatoarele cu sisteme de operare non-Windows.

Fişierele de tip AVI au extensia .avi.

b) Formatul Windows Media

Acest formatul a fost dezvoltat de către Microsoft. Şi acest format este unul suportat de toate computerele pe care rulează Windows, dar nu este suportat de calculatoarele cu sisteme de operare non-Windows decât în urma instalării unor extra componente (playere specializate).

Fişierele de tip Windows Media au extensia .wmv.

c) Formatul MPEG

Formatul MPEG  (Moving Pictures Expert Group) este în prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet.

Fişierele de tip MPEG au extensia .mpg sau .mpeg.

d) Formatul QuickTime

Formatul QuickTime a fost dezvoltat de către Apple şi nu poate rula pe platformele Windows fără instalarea unui player specializat.

Fişierele de tip QuickTime au extensia .mov sau .qtm.

e) Formatul RealVideo

Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media.

Formatul permite difuzarea de informaţii video (video on-line, Internet video) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.

Fişierele de tip RealVideo au extensia .rm sau .ram.

f) Formatul Shockwave (Flash)

Formatul Shockwave a fost dezvoltat de către Macromedia. Acest format necesită instalarea unui player specializat pentru a putea rula. În prezent, această componentă este oferită preinstalată de ultimele versiuni ale browsere-lor Netscape şi Internet Explorer.

Fişierele de tip Shockwave au extensia .swf.

12.4. Adăugarea de informaţii multimedia unei pagini web

Informaţiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajutător (un player specializat), în funcţie de elementul HTML şi de formatul fişierului multimedia folosit.

Cea mai simplă cale de a realiza acest lucru este prin folosirea unei ancore (link) care să ducă la sursa elementului multimedia. Este cea mai “prietenoasă” metodă întrucât oferă posibilitatea vizitatorilor de a alege între a vedea o pagină web cu elemente multimedia sau fără acestea.

În acest caz pagina se încarcă mult mai repede nemaifiind nevoie să se încarce toate informaţiile multimedia.

Sintaxa folosită pentru realizarea celor prezentate mai sus este similară cu cea prezentată în subcapitolul 6.3. (Ancore):

<A href="nume fişier multimedia">Click here to play multimedia</A>

O metodă specifică, mai complexă, ce are ca rezultat includerea în pagina web (ca parte integrantă din aceasta) a unor informaţii multimedia, se realizează prin intermediul elementului <OBJECT>.

Notă: Deşi, în funcţie de browser-ul folosit, mai pot fi folosite şi alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, şi <EMBED>, recunoscut de Internet Explorer şi Netscape, consorţiul W3C (World Wide Web Consortium) recomandă utilizarea elementului <OBJECT>.

Atributele utilizate cu acest element sunt:

Atribut	Descriere
archive	Precizează locaţia (URL-ul) fişierelor arhivă.
classid	Precizează locaţia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. În Windows, aceste valori sunt înscrise în regiştri şi pot fi accesate cu aplicaţia Registry Editor.
codebase	Precizează calea (URI-ul) în care se găseşte clasa obiectului specificat prin atributele classid, data şi archive.
codetype	Specifică tipul fişierului specificat prin atributul classid.
data	Precizează numele şi locaţia (URL-ul) obiectului. Se poate folosi împreună sau ca o alternativă a atributului classid, în funcţie de tipul obiectului.
declare	Cînd este prezent, acet atribut face ca definiţia curentă introdusă de elementul <OBJECT> să fie tratată ca o simplă declaraţie.
height	Specifică înălţimea suprafeţei în care va fi afişat obiectul.
name	Precizează denumirea obiectului (când acesta este cuprins într-un formular).
standby	Precizează textul ce va fi afişat până când este încărcat obiectul.
tabindex	Precizează poziţia elementului curent în document (ordinea în care va fi focalizat de utilizator când se foloseşte tastatura).
type	Determină tipul MIME asociat cu fişierul respectiv. Este un atribut opţional dar recomandat când se foloseşte atributul data.
width	Specifică lăţimea suprafeţei în care va fi afişat obiectul.

Acest element necesită în mod obligatoriu tag-ul de închidere corespunzător </OBJECT>.

Împreună cu elementul <OBJECT> (în interiorul acestuia) se foloseşte şi elementul asociat <PARAM> care defineşte parametrii elementului <OBJECT>.

Atributele utilizate cu acest element sunt:

Atribut	Descriere
id	Precizează un identificator unic pentru element.
name	Precizează o denumire pentru element.
type	Determină tipul conţinutului.
value	Specifică valoarea parametrului.
valuetype	Specifică tipul valoarii parametrului.

Elementul <OBJECT> poate suporta diferite tipuri de informaţii multimedia, cum ar fi imagini, sunete, video, pagini web etc.

În funcţie de tipul acestor informaţii, diferă şi sintaxa folosită în limbajul HTML.

Astfel, pentru a insera o imagine (în format .jpg), prin intermediul elementului <OBJECT>, se foloseşte următoarea sintaxă:

<OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg">

</OBJECT>

Pentru a insera un sunet (în format .wav) se foloseşte următoarea sintaxă:

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="nume_fisier.wmv">

</OBJECT>

Pentru a insera un film (în format .wmv) se foloseşte următoarea sintaxă:

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="nume_fisier.wmv">

</OBJECT>

Pentru a insera o pagină web se foloseşte următoarea sintaxă:

<OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..."

DATA="http://www.pagina_web.com">

</OBJECT>

Pentru a insera o animaţie creată în Flash (în format .swf) se foloseşte următoarea sintaxă:

<OBJECT WIDTH="..." HEIGHT="..."

CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash

/swflash.cab#4,0,0,0">

<PARAM NAME="SRC" VALUE=" nume_fisier.swf">

</OBJECT>

12.5. Inserarea unui film QuickTime într-o pagină web

Formatul QuickTime a fost dezvoltat de către Apple şi, deşi este un format des întâlnit pe Internet, nu poate rula pe platformele Windows fără instalarea unui player specializat.

Fişierele de tip QuickTime au extensia .mov sau .qtm.

Cu ajutorul elementului <OBJECT> poate fi uşor adăugat cod într-o pagină web astfel încât un film QuickTime să poată fi inserat într-o pagină web.

Astfel, se poate seta instalarea automată a unui player QuickTime în cazul în care nu este deja instalat.

Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="240" HEIGHT="300"

CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM NAME="src" VALUE="sample.mov">

<PARAM NAME="autoplay" VALUE="true">

<PARAM NAME="controller" VALUE="true">

</OBJECT>

Atributele width şi height trebuie setate astfel încât să corespundă dimensiunii fimului QuickTime (în pixeli).

Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel încât să identifice controlul ActiveX ce trebuie instalat pe computer înainte ca filmul să poată fi rulat. Dacă utilizatorul nu are instalat respectivul control ActiveX, browser-ul poate în mod automat să-l descarce şi să-l instaleze.

Atributul codebase specifică calea (URI-ul) în care se găseşte clasa obiectului specificat prin atributul classid. Internet Explorer foloseşte acest atribut pentru a specifica locaţia de unde poate fi descărcat player-ul corespunzător. În acest caz, trebuie setată "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaţia unde se găseşte ultima variantă a player-ului QuickTime.

Parametrul src trebuie să se orienteze asupra fişierului ce conţine filmul.

Parametrul autoplay se setează "true" în cazul în care se doreşte ca filmul să înceapă să ruleze automat.

La fel şi parametrul controller se setează "true" în cazul în care se doreşte să fie afişată bara de control a player-ului.

În urma inserării codului prezentat mai sus, rezultatul va fi următorul:

12.6. Inserarea unui film Real Video într-o pagină web

Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media.

Formatul permite difuzarea de informaţii video (video on-line, Internet video) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.

Fişierele de tip RealVideo au extensia .rm sau .ram.

Cu ajutorul elementului <OBJECT> se introduce codul în pagina web astfel încât filmele Real Video să poată fi inserate într-o pagină web.

Spre deosebire de formatul QuickTime, nu se poate seta instalarea automată a player-ului corespunzător în cazul în care nu este deja instalat. Prin urmare, înainte de a putea rula un film în format Real Video, este necesară instalarea programului RealPlayer. Versiunea pentru Windows poate fi descărcată de la adresa http://uk.real.com/player/win.

Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="320" HEIGHT="240"

CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">

<PARAM NAME="controls" VALUE="All">

<PARAM NAME="autostart" VALUE="true">

<PARAM NAME="src" VALUE="sample.rm">

</OBJECT>

Atributele width şi height trebuie setate astfel încât să corespundă dimensiunii fimului Real Video (în pixeli).

Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel încât să identifice controlul ActiveX ce trebuie instalat pe computer înainte ca filmul să poată fi rulat.

Parametrul src trebuie să se orienteze asupra fişierului ce conţine filmul.

Parametrul autostart se setează "true" în cazul în care se doreşte ca filmul să înceapă să ruleze automat.

Parametrul controls se setează "All" în cazul în care se doreşte să fie afişată bara de control a player-ului sau "ImageWindow " în cazul în care NU se doreşte să fie afişată bara de control a player-ului.

În urma inserării codului prezentat mai sus, rezultatul va fi următorul:

12.7. Alte metode de inserare a unor sunete într-o pagină web

Aşa cum am atras atenţia anterior, pentru introducerea de sunete într-o pagină web mai pot fi folosite şi alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, şi <EMBED>, recunoscut de Internet Explorer şi Netscape.

Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul unei pagini web. Fişierele suportate de acest element pot fi în format WAV, AU sau MID.

Atributele caracteristice acestui element sunt:

Atribut	Descriere
balance	Precizează balansul. Poate lua valori între -10000 (100% stânga) şi +10000 (100% dreapta).
delay	Defineşte timpul de pauză dintre repetiţii.
id	Defineşte un identificator atribuit sunetului.
loop	Precizează de câte ori va fi repetat sunetul (-1 = infinit).
src	Precizează locaţia (URL-ul) fişierului ce conţine sunete.
title	Precizează un titlu atribuit sunetului.
volume	Precizează volumul. Poate lua valori între 0 (max.) şi -10000 (min.).

Sintaxa folosirii acestui element este foarte simplă:

<HTML>

<BODY>

<H2>Muzica in fundal </H2>

<BGSOUND SRC="town.mid">

</BODY>

</HTML>

Folosind codul de mai sus veţi obţine o pagină web pe fundalul cărei se va auzi o piesă instrumentală.

Elementul <EMBED> este folosit pentru a insera elemente multimedia într-o pagină web în cazul browsere-lor care nu suportă elementul <OBJECT>.

Elementul <OBJECT> poate fi folosit cu browserele mai noi, care suportă controale ActiveX (Internet Explorer ³ 5), în vreme ce elementul <EMBED> este recomandat să fie folosit pentru browserele mai vechi.

Pentru compatibilitate, se recomandă folosirea simultană a celor două elemente. În această situaţie, un browser care recunoaşte elementul <OBJECT> va ignora elementul <EMBED>.

Atributele caracteristice acestui element sunt:

Atribut	Descriere
autostart	Stabileşte dacă obiectul multimedia porneşte în mod automat la încărcarea paginii web. Poate lua valorile true sau false.
height	Specifică înălţimea suprafeţei în care va fi afişat obiectul.
hidden	Stabileşte dacă obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua valorile true sau false.
src	Precizează locaţia (URL-ul) fişierului ce conţine sunete.
width	Specifică lăţimea suprafeţei în care va fi afişat obiectul.
volume	Precizează volumul. Poate lua valori între 0 (max.) şi -10000 (min.).

Împreună cu elementul <EMBED> se recomandă folosirea elementului <NOEMBED> care ar trebui să conţină informaţii ce vor fi afişate în cazul în care browser-ul nu suportă elementul <EMBED>.

Din nefericire, un browser care suportă elementul <EMBED> va ignora elementul <NOEMBED>, chiar dacă este incapabil să afişeze obiectul introdus de elementul <EMBED>.

Sintaxa recomandată pentru folosirea acestui element este următoarea:

<EMBED SRC="cale/fişier_multimedia" WIDTH="..." HEIGHT="..." >

<NOEMBED>

<P>Din păcate nu aveţi instalat plugin-ul corespunzător pentru a vedea acest tip de fişier multimedia. Puteţi vedea în continuare o imagine edificatoare.

<IMG SRC="cale/fişier_imagine" WIDTH="..." HEIGHT="..." ALT="o imagine edificatoare">

</NOEMBED>

Se poate folosi chiar şi o combinaţie între elementele <EMBED> şi <BGSOUND>, astfel încât, dacă unul din elemente nu este suportat de browser, să fie recunoscut celălalt.

Folosirea codului următor

<HTML>

<BODY>

<EMBED SRC="town.mid" WIDTH="100" HEIGHT="40" >

<NOEMBED>

<H2>Muzica in fundal </H2>

<BGSOUND SRC="town.mid">

</NOEMBED>

</BODY>

</HTML>

va avea ca rezultat afişarea următorului rezultat:

Notă: Bara de control afişată aparţine player-ului QuickTime deoarece a fost setat ca "Default Player" pentru fişierele de tip .MID.

12.8. Aplicaţie practică

Pentru exemplificare, vom crea un fişier test12.html ce va cuprinde o parte dintre elementele prezentate anterior:

<HTML>

<HEAD>

<TITLE>Adaugarea de informatii multimedia unei pagini web</TITLE>

</HEAD>

<BODY>

<H2>Inserarea unei imagini</H2>

<OBJECT HEIGHT="200" WIDTH="200" TYPE="image/jpeg" DATA="computer.jpg">

</OBJECT>

<BR>

<H2>Inserarea unui sunet (format .wav)</H2>

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="horse.wav">

<EMBED SRC="horse.wav" WIDTH="100" HEIGHT="40" >

<NOEMBED>

Browser-ul dvs. nu suportă elementele OBJECT şi nici EMBED

</NOEMBED>

</OBJECT>

<BR>

<H2>Inserarea unui film (format .wmv)</H2>

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="movie.wmv">

</OBJECT>

<BR>

<H2>Inserarea unei pagini web</H2>

<OBJECT TYPE="text/html" HEIGHT="200" WIDTH="400"

DATA="test10.html">

</OBJECT>

<BR>

<H2>Inserarea unei animatit Flash (format .swf)</H2>

<OBJECT WIDTH="400" HEIGHT="200"

CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">

<PARAM NAME="SRC" VALUE="flash.swf">

</OBJECT>

</BODY>

</HTML>

Rezultatul afişat în browser-ul IE va fi următorul: