Az animált gifek, svg animációk webdizájnban betöltött újabb szerepéről, jelentőségéről korábban már írtam. Most következzék a html5 videó. Az elképzelésünk a következő volt: szerettünk volna megmozgatni egy grafikai elemet, végtelenítve. Viszont maga a grafikai elem elég nagy méretű, és korábbi tesztjeinknél már láttuk, hogy az animgif sem minőségben, sem mérethatékonyságban nem ideális választás.
Az animált svg megoldás pedig a grafikai elem összetettsége miatt nem jött végül szóba. Tettünk egy kísérletet a html5 videóval.
Mindenekelőtt a videót kellett úgy megszerkeszteni, hogy végteleníthető legyen a mozgás, majd pedig a fájlméreten kellett annyit nyerni, amennyit csak tudtunk. Egy néma, 200x200 pixeles videó lett az eredmény, 631kb méretben. Ugyanilyen minőségben animgifben 4,7 megabyte-ra jön ki.
A másik problémánk az volt, hogy egy kör alakú elemet szeretnénk mozgatni, viszont a videó természetszerűleg négyzetes. A transzparens videó nem tűnt jó választásnak, fájlméret és böngészőtámogatás miatt, így azt az egyszerű megoldást találtuk ki, hogy a négyzetes videót CSS-ből kerekítjük le border-radiusszal.
Maga a videó megkapta a preload=auto, autoplay, loop tageket, a rá vonatkozó CSS-osztályban pedig az opacity lejjebb húzásával oldottuk meg, hogy az animált videó szépen harmonizáljon a háttérrel.
A videó méretét az eredeti 200x200 pixelről CSS-ből megnöveltük, és még így is egy kiválóan működő, méretében barátságos nagy animációt tudtunk illeszteni a dizájnba. Az mp4 mellé az ogg verziót is belinkeljük. Azokban a böngészőkben, amelyekben nem támogatott ez az eszköztár (szerencsére már nem gyakori), oda sima png-t alkalmazunk. A videót természetesen linkelni is tudjuk, ha akarjuk.
A vonatkozó kódrészlet:
<video id="videoContainer" width="200px" height="200px" preload="auto" autoplay loop> <source src="ANIMACIO.mp4" type="video/mp4"> </video>
#videoContainer { border-radius: 50%; border-style: solid; border-width: 0px; width: 400px; height: 400px; opacity: 0.5; padding-left: 5px; }
Még egy érdekesség: egyre több szájt úgy próbálja optimalizálni az oldalán megjelenő animgifeket, hogy egy képet tesznek a videó fölé, és csak arra kattintva indul el a videó. Érdekes próbálkozás lenne, ha az animgifeket a háttérben html5 videókká konvertálnák, és ezeket a sokkal kisebb fájlméretű, végtelenített videókat szúrnák be az animgifek helyére.
Csabosz · http://bibliaprogramok.blog.hu 2014.07.08. 10:20:19
cbabos 2014.07.10. 14:55:14
Mondván ez amolyan adatforgalom spórolás. Abban a pillanatban azonban hogy a felhasználó egyetlen tapit is ejtett az oldalon, a videó lejátszását / betöltését egy scripttel el is lehet intézni.
Természetesen ez a html5 videókra igaz, nem az animgifekre.
hírbehozó · https://webisztan.blog.hu/ 2014.07.10. 14:55:50