Weboldalkészítő suli #42 - Videók a honlapon
A HTML5 vitathatatlanul egyik, ha nem a legnépszerűbb, ugyanakkor legtöbb vitát kiváltó újdonsága a címke, amellyel videókat illeszthetünk be a honlapjainkba. Ám a helyzet sajnos messze nem olyan egyszerű, mint azt sokan gondolnák.
Ahányszor csak szóba került a HTML5 az elmúlt hónapokban-években különböző szakmai és „kevésbé szakmai” honlapokon vagy kiadványokban, szinte minden egyes alkalommal a legfontosabb újdonságok között említették a <video> elemet, mint ami majd elhozza a „multimédiás Kánaánt” a webre, és persze majdnem mindig megemlítették, hogy ez egy „újabb szeg a Flash koporsójába”.
A videó elindításig a „poszterkép” látszik a helyén
Nos, a böngészőgyártók azóta valóban beépítették programjaikba a <video> címke támogatását, és a weben egyre több helyen találkozhatunk „HTML5-ös videókkal” – például a YouTube-on 2010 januárja óta választható HTML5-alapú lejátszó is –, ám egyelőre még nagyon messzinek tűnik annak az ezernyi szeggel kivert koporsónak az elhantolása, a Flash-videók nevető harmadikként, pontosabban negyedikként valószínűleg még egy (jó?) darabig szintén megtalálhatók lesznek a weben…
Beágyazás 1.0
Ha leegyszerűsítjük a dolgot, akkor egy videó beillesztése nem sokkal bonyolultabb feladat, mint egy bitkép elhelyezése az oldalon, márpedig ez remélhetőleg már rutinszerűen megy minden Websuli-hallgatónak, tehát például: <img src="images/logo.gif" alt="Logónk" />
Ehhez képest szinte csak annyit kell változtatnunk a már bevált meneten, hogy az img helyett video-t kell írnunk, el kell hagynunk a kép helyett esetlegesen megjelenő alternatív szöveget, és a tag lezárására nem használhatjuk a / jeles rövid változatot, ki kell tennünk a zárócímkét, például: <video src="video/demo.ogv"></video>
Ebben az esetben a felhasználó a videót csak a jobbgombos menüből tudná elindítani – amihez ráadásul tudnia kellene, hogy ez egy videó, és nem egy kép –, ami, valljuk be, nem túl kényelemes megoldás. Ezért vagy meg kell jeleníttetnünk egy böngészőfüggő eszközpanelt a controls attribútum megadásával, és/vagy – bár ez több ok miatt is ellenjavallt – nekünk kell a videót automatikusan elindítanunk az autoplay attribútummal, például: <video src="video/demo.ogv" controls></video>
Persze a képekhez hasonlóan megadhatjuk a videó szélességét (width) és magasságát (height) is, valamint beállíthatjuk, hogy szeretnénk-e végtelenített lejátszást (loop), esetleg kikapcsolhatjuk a videó hangját (muted), megmondhatjuk a böngészőnek, hogy megkezdje-e a videó letöltését a lejátszást megelőzően (preload –none, metadata vagy auto). Sőt, ezeken kívül még kiválaszthatunk egy képet is, ami addig fog látszani, amíg a videót el nem indítja a felhasználó (poster).
Böngészõnként eltérõ a videoelemek kontrolpanele
Sajnos a helyzet messze nem ilyen „egyszerűen nagyszerű”, mint amilyennek a fentiekből látszik. Az ma már teljesen természetes, hogy a böngészőknek teljesen mindegy, hogy mi éppen JPG, PNG vagy GIF formátumú képet szeretnénk az oldalon megjeleníteni. Ahogyan az is lényegtelen, hogy például a megadott PNG 2, 16, 256 vagy éppen 16,7 millió színű (bár az átlátszó hátterű PNG-kkel egyes régebbi böngészőknek meggyűlik a baja), a megjelenítendő JPG progresszív-e vagy sem, vagy a kiválasztott GIF egy vagy több képkockát tartalmaz-e, és utóbbi esetben hogyan is kell lejátszani az animációt. Ugyanakkor jelenleg nincs olyan videoformátum, amelyet mindegyik böngésző le tudna játszani, és miután több „makacs nagyágyú” is a saját formátumát privilegizálja, ezért még várnunk kell, amíg eldől, hogy melyik is lesz a HTML5 videoformátuma.
