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.

Címkék: animáció webdesign html5 videó videó animáció