Animáció és dizájn: a html5 videó

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 transparens 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 vonatkozó kódrészlet:  #videoContainer { border-radius: 50%; border-style: solid; border-width: 0px; width: 400px; height: 400px; opacity: 0. 1; 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.