Multimédia a webhelyen

Átírás

1 12. ÓRA Multimédia a webhelyen A lecke tartalma: Hivatkozás multimédiafájlokra Multimédiafájlok beágyazása További tippek a multimédia használatához A multimédia szó magában foglal mindent, amit egy weboldalon láthatunk vagy hallhatunk: hangot, mozgóképet, animációt csakúgy, mint az állóképeket és a szöveget. Az állóképek és a szöveg használatával az elõzõ órák során már megismerkedtünk, így a mai órán arról tanulunk, hogy miként illeszthetõk be egy webhelyre a multimédiás tartalom további típusai. Semmilyen hang, mozgókép vagy animáció létrehozását nem fogjuk tárgyalni arról lesz szó, hogy miként válhatnak az ilyen fájlok a webhelyünk részévé, legyen szó akár hivatkozásról, akár beágyazásról. Mielõtt még elgondolkodnánk arról, hogy multimédiás tartalommal gazdagítjuk a webhelyünket, érdemes az eszünkbe idézni, hogy nem minden felhasználónak vannak ilyen tartalom lejátszásához szükséges eszközei, és az ekkora méretû fájlok gyors letöltéséhez szükséges szélessávú internetkapcsolattal sem rendelkezik mindegyikük.

2 200 Tanuljuk meg a HTML és a CSS használatát 24 óra alatt Ha egy hivatkozás multimédiafájlra mutat, mindig figyelmeztessük a látogatókat. Ajánljuk fel nekik a tartalom meghallgatását, illetve megtekintését, de dönthessenek õk arról, hogy meg kívánják-e nyitni az ilyen fájlokat. Önálló feladat Hozzunk létre vagy keressünk az Interneten a weboldalunkon használható multimédiafájlokat! Mielõtt megismernénk a multimédia-tartalmak weboldalon való elhelyezésének módját, nem árt, ha kiindulásként rendelkezünk valamilyen használható multimédia-tartalommal. Multimédia-tartalmat létrehozni legyen szó a multimédia bármely típusáról könnyen nagy kihívást jelentõ és bonyolult feladatnak bizonyulhat. Ha a tartalmat az alapoktól kívánjuk megalkotni, ennél a könyvnél lényegesen többre lesz szükségünk -nem lesz az ember egyik pillanatról a másikra multimédia-guru. Ha azonban a tartalom maga már készen áll, a mai órán megtanulhatjuk, hogy miként helyezzük el legújabb mûvünket a weboldalunkon. Azok, akiknek egy mûvészi alkotás elkészítése nem napi gyakorlat, próbálkozhatnak más módszerekkel is szert tenni használható multimédiás tartalomra. A nyilvánvaló módszeren kívül rendeljük meg a munkát egy mûvésztõl íme néhány lehetõség: Az Interneten található tartalom nagy része ingyenes. Természetesen nem rossz gondolat, ha elõzõleg azért egyeztetünk a szerzõvel, illetõleg a tartalom jelenlegi tulajdonosával, fõleg ha nem szeretnénk szerzõi jogi pert a nyakunkba. Ezen felül megemlítenénk, hogy az Amerikai Egyesült Államokban sok az olyan kormányhivatal, amelyekre igaz, hogy az általuk létrehozott tartalom az amerikai állampolgárok közös tulajdona (akik ingyenesen használhatnak például minden, a NASA által az Interneten közzétett anyagot.) Sok az olyan internetes keresõ például a google.com, a yahoo.com, a lycos.com és mások, amely rendelkezik multimédiafájlok keresését szolgáló képességekkel is. Amennyiben tiszteletben tartjuk a szerzõi jogokat, ezzel a módszerrel könnyen lelhetünk egy adott témához kapcsolódó multimédiás tartalomra. Egy gyors, Flash-animációt, QuickTime-filmrészletet vagy valamilyen hangfájlt célzó keresés több eredménnyel szolgál, mint amennyivel elboldogul az ember. Ha ki szeretnénk élni a kreativitásunkat, válasszuk ki a kedvenc médiumunkat van, akinek ez a videózás, másoknak a hangfelvétel-készítés lesz, megint mások inkább egy animáció készítésével pepecselnek szívesen. Ha meghoztuk a döntést, keressük meg a mestermû elkészítéséhez alkalmas alkalmazást. Sok cég foglalkozik multimédia-tartalom készítésére használatos programokkal, ilyen például az Adobe ( és az Apple ( hogy csak kettõt említsünk.

3 12. óra Multimédia a webhelyen 201 Hivatkozás multimédiafájlokra Mozgóképet, illetve hangfelvételt a legegyszerûbben és legmegbízhatóbban úgy helyezhetünk el egy weboldalon, ha az <a href> címkével létrehozunk egy a fájlra mutató hivatkozást éppen úgy, ahogy egy másik HTML-fájlra mutatnánk. Az órán bemutatott, multimédiás tartalom weboldalon történõ elhelyezésére szolgáló módszerek egymáshoz igen hasonlóan mûködnek, a felhasznált tartalom típusától függetlenül. Az alábbi sorral például egy MOV formátumú, jégkorong-mérkõzést rögzítõ felvételre hivatkozhatunk: 12 <a href="hockey.mov">view the hockey video clip.</a> Amikor a látogató a "View the hockey video clip." (A jégkorong-mérkõzés megtekintése) mondatra kattint, a webkiszolgálónkról a hockey.mov fájl letöltõdik a számítógépére, a letöltés végeztével pedig automatikusan elindul a gépre telepített segédalkalmazás vagy bõvítmény. Ha nincs megfelelõ segédalkalmazás vagy bõvítmény a gépen, a böngészõ felajánlja a megfelelõ bõvítmény letöltését, illetve lehetõséget ad arra, hogy a látogató a fájlt a merevlemezére mentse késõbbi megtekintés végett. A példa egy olyan weboldal elkészítésére szolgáló kódot tartalmaz, amelyben egy képre kattintva nyitható meg a Windows Media formátumú fájlban tárolt mozgókép lejátszásához szükséges hivatkozás. A hivatkozást a jobb használhatóság kedvéért a képen kívül a szövegben is megismételjük példa Kép Windows Media mozgóképhez kapcsolása az <a> címke segítségével <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="en"> <head> <title>fun in the Pond</title> </head> <body> <h1>fun in the Pond</h1> <p><a href="pond.wmv"><img src="projector.gif" alt="pond Video" style="border-style:none; float:left; padding:12px" /></a> Michael s backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing. He has numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they

4 202 Tanuljuk meg a HTML és a CSS használatát 24 óra alatt don t bark, purr, or fetch anything other than food, these fish are his pets, and good ones at that. You can <a href="pond.wmv"> click here</a> or on the animated graphic on the left to see a movie clip of some fish in the pond.</p> </body> </html> Ha az Olvasó számára a segédalkalmazás (helper application) kifejezés ismeretlenül cseng, elmondjuk, hogy azokról a külsõ programokról van szó, amelyeket a webböngészõ hív segítségül, amikor olyan fájlokkal találkozik, amelyeket egyébként nem tudna megnyitni. A segédalkalmazások meghívása így jobbára azokhoz a fájltípusokhoz kapcsolódik, amelyeknek a megnyitásával a böngészõ egyedül nem boldogul. A bõvítmények (plug-in) olyan különleges segédalkalmazások, amelyeket közvetlenül a webböngészõbe telepítünk, és a segítségükkel a multimédiás tartalom megtekintésére közvetlenül a webböngészõbõl nyílik módunk. A fenti kód a projector.gif animált GIF-fájl felhasználásával hoz létre a pond.wmv mozgóképhez vezetõ hivatkozást. A ábrára a medencérõl szóló mintaoldal került látható a filmvetítõt ábrázoló kép. Ha a képre kattintunk, a megnyíló Windows Media Playerben (Médialejátszó) megnézhetjük a mozgóképfelvételt ábra A projector.gif nevû, animált GIF formátumú képre kattintva nyílik meg a Windows Media fájlra mutató hivatkozás. A fájl megnyitását külsõ segédalkalmazás végzi

5 12. óra Multimédia a webhelyen 203 Ha a felvételt meg szeretnénk tekinteni, mindössze az animált vetítõgépre esetleg a szövegben lévõ hivatkozásra kell kattintanunk. A mûvelet eredményeképpen megkezdõdik a felvétel lejátszása, mégpedig vagy egy bõvítmény segítségével ha van a böngészõhöz telepítve a felvételt lejátszani képes bõvítmény, vagy egy megfelelõ segédalkalmazással. A böngészõnk másképp kezeli a hivatkozást, ha az a Windows Media formátumú pond.wmv fájl helyett a QuickTime formátumú pond.mov fájlra mutat. A QuickTime bõvítménynek köszönhetõen külsõ program indítása helyett közvetlenül a böngészõablakban tekinthetjük meg a felvételt (lásd a ábrát) ábra A képre kattintva a hivatkozott fájl pond.mov a böngészõ QuickTime bõvítményének használatával nyílik meg Alighanem az Olvasó is kitalálta már, hogy a multimédiafájlokra mutató egyszerû hivatkozás biztosítja leginkább a korábbi programváltozatokkal való együttmûködést, mivel így a böngészõ felelõssége kitalálni, hogy egy multimédia-felvétel miként játszható le. A dolog hátulütõje, hogy a felvétel megjelenését kevéssé tudjuk szabályozni, és szó sincs arról, hogy a felvétel az oldal szerves részét képezhetné. Amennyiben a böngészõnk nem támogatja a QuickTime formátumot, a QuickTime lejátszó ingyenesen letölthetõ a webhelyrõl. A böngészõk akkor sem feltétlenül egyformán játsszák le a QuickTime formátumú felvételeket, ha már van QuickTime lejátszó telepítve a gépünkre. A könyv szerzõjének Windowst futtató gépén például az Internet Explorer és a Firefox egyaránt bõvítmény használatával, a böngészõablakban játssza le a felvételt, míg az Opera a QuickTime lejátszót segédalkalmazásként indítja el.

6 204 Tanuljuk meg a HTML és a CSS használatát 24 óra alatt Multimédiafájlok beágyazása Az XHTML szabvány része az <object> címke, amelyet mostanra valamennyi, weboldalakba ágyazott multimédia-típusnál használni illene. Ez a címke váltja le azt az <embed /> címkét, amellyel még mindig találkozhatunk néhány HTML-forráskódban. Amikor egy multimédiafájlt beágyazunk egy weboldalba, létrejön néhány olyan szoftveres vezérlõelem, amely a közvetlen, másodlagos ablak megnyitását, illetve az éppen olvasott oldalról való továbblépést szükségtelenné tevõ fáljmegnyitáshoz kell. Az alábbi kód a korábban már látott medencés felvétel beágyazását végzi. A beágyazáshoz pusztán az <object> címkét használjuk. <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" width="320" height="305"> <param name="type" value="video/x-ms-wmv" /> <param name="url" value="pond.wmv" /> <param name="uimode" value="full" /> <param name="autostart" value="false" /> </object> ábra Az <object> címke használatával lehetõségünk nyílik egy mozgóképet ágyazni egy weboldalba, mégpedig a használni kívánt lejátszó megjelölésével Tekintettel arra, hogy teljes egészében elvégzi a felvétel beágyazását az oldalba (lásd a ábrát), a kód igazán nem számít szörnyen bonyolultnak. Az oldal legkacifántosabb része az <object> címke classid (osztályazonosító) jellemzõje, azaz az ott olvasható hosszú, betûkbõl és számokból álló kód. Ez a Windows Media Player alkalmazás egyedi azonosítója; ezzel mondjuk meg az <object> címkének, hogy a felvétel lejátszását a Windows Media Player beágyazásával végezze. A fenti kód így módosítás nélkül használható a saját weboldalainkon.

7 12. óra Multimédia a webhelyen 205 Az <object> címke width és height jellemzõje adja meg a beágyazott Windows Media Player alkalmazás ablakának méretét. Ha ezeket a jellemzõket elhagyjuk, akkor pár böngészõ a tartalom méretének megfelelõen alakítja a beágyazott alkalmazás ablakának méretét, más böngészõk ellenben meg sem jelenítik a beágyazott alkalmazást. Ha biztosra akarunk menni, állítsuk a lejátszani kívánt felvétel méretének megfelelõ nagyságúra a fenti tulajdonságokat. Az <object> címkepár tagjai között találjuk meg a felvétel lejátszásának további részleteit hordozó négy <param> címkét. Minden címkének két jellemzõje van, a name (név) és a value (érték). Ezek rendelnek adatot (értéket) egy adott beállításhoz (névhez). Esetünkben a felvétel URL nevû jellemzõjének értéke a pond.wmv fájlnév. A harmadik, uimode nevû paraméter azt határozza meg, hogy a Windows Media Player mely gombjai és felületi elemei látszódjanak. A full érték a felhasználói felület valamennyi elemének vezérlõgomboknak, hangerõszabályzónak megjelenítését jelenti. Az utolsóként megadott autostart paraméter értéke false (hamis), azaz amikor a webböngészõben megnyitjuk az oldalt, a felvétel lejátszása nem indul el automatikusan. 12 A legfurcsább alighanem a type paraméter. Ez a paraméter végzi a megjelenített tartalom formátumának (esetünkben Windows Media Video, azaz WMV) azonosítását. A paraméter értékét az internetes MIME-szabványban foglaltak közül kell kiválasztanunk. A MIME-típus egy olyan azonosító, amely az Interneten elõforduló különféle tartalomtípusok azonosítására szolgál. A MIME betûszó a Multipurpose Internet Mail Extensions (többcélú internetes levélkiterjesztések) kifejezés rövidítése, mégpedig azért, mert a MIME-típusok eredetileg az ekhez csatolt mellékletek azonosítására szolgáltak. Az <object> címke type jellemzõjében is ezeknek a típusoknak a használatával adjuk meg a data jellemzõben hivatkozott médiafájl típusát. Az alábbiakban néhány olyan népszerû hang- és mozgóképformátum MIME-típusát ismertetjük, amelyeket esetleg az Olvasó is szívesen használ a weboldalain. WAV hangfájl: audio/x-wav AU hangfájl: audio/basic MP3 hangfájl: audio/mpeg MIDI hangfájl: audio/midi WMA hangfájl: audio/x-ms-wma RealAudio hangfájl: audio/x-pn-realaudio-plugin AVI fájl: video/x-msvideo WMV fájl: video/x-ms-wmv MPEG videófájl: video/mpeg QuickTime fájl: video/quicktime A példa az úszómedencés weboldal kódját ismerteti. Lehetõségünk nyílik az <object> címke használatát megfigyelni.

8 206 Tanuljuk meg a HTML és a CSS használatát 24 óra alatt példa WMV formátumú mozgókép közvetlen beágyazása az <object> címke segítségével <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="en"> <head> <title>fun in the Pond</title> </head> <body> <h1>fun in the Pond</h1> <div style="float:left; padding:3px"> <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" width="320" height="305"> <param name="type" value="video/x-ms-wmv" /> <param name="url" value="pond.wmv" /> <param name="uimode" value="full" /> <param name="autostart" value="false" /> <embed width="320" height="305" type="video/x-ms-wmv" src="pond.wmv" controls="all" loop="false" autostart="false" pluginspage=" /> </object> </div> <p>michael s backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing.</p> <p>he has numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they don t bark, purr, or fetch anything other than food, these fish are his pets, and good ones at that.</p> </body> </html> Minthogy az XHTML nem támogatja az <embed /> címke használatát, a címke használata megakadályozza az oldalaink érvényesítését. A probléma sajnos nem kerülhetõ meg meg kell várnunk, amíg a böngészõk teljeskörûen támogatni fogják az <object> címke használatát, vagy átállhatunk a HTML 5 <embed /> elemére. Észrevehettünk pár újabb kódrészletet, amely nem szerepelt az <object> címke használatát bemutató korábbi példánkban. Sajnos, ahogy arra már egy korábbi lecke alkalmával kitértünk, nem minden webböngészõ valósítja meg az <object> elem támogatását. Ezen oknál fogva válik szükségessé az <object> címkén belül az <embed /> használata: így tudjuk figyelembe venni a böngészõk közötti eltéréseket. A megoldás nem ideális, de amíg a böngészõgyártók folyamatos lemaradásban vannak az uralkodó szabványokhoz képest, nincs más eszközünk. Igazán figyelmesen olvasva a kódot, azt is észrevehetjük, hogy az <embed /> az <object> elemben hordozottal megegyezõ információt hordoz.