Egy friss reggeli debuggolás után elkészült a HTML 5 video tag-et bemutatni kívánó mini-alkalmazásom. Az alap vezérlések implementálása után bekerült némi SVG filter (továbbiakban szűrő) támogatás és leginkább hibajavítás zajlott.
A dolog lényegében arról szól, hogy a jobb oldali videok közül lehetőségünk van egyet kattintással kiválasztani. A választott video ezután betöltődik a fő video helyére és innen lehetőségünk van a lejátszásra.
Jobb oldalon a választható videokon egy fekete-fehér és blur szűrő van, ezenkívül egy apró CSS3 transzformáció (forgatás).
A nagyméretű videon lehetőség van szűrő hozzáadására, ezeket 1-8-as billentyűkkel hívhatjuk elő, a 0-s gomb lenyomásával pedig megvonjuk a szűrőt a video-tól.
A design hagy némi kívánni valót maga után és nem vagyok a kliens oldal nagy guruja sem, így az esetleges ronda megoldásokért elnézést kérek :). De talán arra megfelelő az oldal, hogy az egyszerűbb video taggal kapcsolatos újdonságok egy részét megmutassa.
A szűrők megvalósítása SVG alatt rendkívül egyszerű. Aki foglalkozott képfeldolgozással az pedig tudja, hogy azért komolyabb kód rejlik az egy soros blur mögött. Szűrők használatával nagyszerű dolgokat lehet véghezvinni, hiszen akár konvolúciós mátrix megalkotására is van lehetőségünk, de ott vannak az eróziós és dilatációs szűrők is, tehát lehet csemegézni.
Fontos megjegyeznem, hogy az (nagy túlzással) alkalmazás csakis az éjszakai rókával hajlandó elköhögni és nem böngészőfüggetlen. Abból is a Minefield/4.0b3pre verzión folyton lehalt, de a legújabb Minefield/4.0b5pre rc már gond nélkül viszi (az okok után nem kutattam).
Kicsit utánajártam a teljes képernyős video módnak. A Firefox 3.6.x-től jobb gombra már elő lehet hívni a funkciót, 3.5.x-re pedig add-on van. De nem ilyen egyszerű a történet, mert ahogy én is tapasztaltam Windows-on a teljes képernyőben lejátszás elég "zizis". Akit bővebben érdekel a teljes képernyős üzemmód, a linkek közt találhat némi érdekeset.
Az alkalmazást itt érhetitek el: link
Linkek:
- Firefox Nightly Builds
- Fullscreen for HTML5 Video element
- Hardware accelerating Firefox
- Safari Fullscreen
- api for fullscreen()
- HTML 5 video konvertálók
Felhasznált források:
No comments:
Post a Comment