Demistificirani HTML5 - IV dio (HTML multimedija)
Koliko je uopšte danas isplativo investirati u podršku za HTML5 video? Odakle uopšte početi? Saznajte u novom članku iz serijala.
Od početka serije članaka koja ima za cilj skidanje vela misterija s još uvijek aktuelnog buzzworda HTML5, isticali smo kako je uz pomoć različitih shim i shiv skripti već danas moguće koristiti nove tehnologije.
Iako se ništa nije promijenilo, treba još jednom istaći da korištenje eksperimentalne tehnologije nije nimalo bezbjedno i da mu ne treba olako pristupiti.
Dozvolite barem dva primjera: Google Chrome i Safari za Windows XP. Google Chrome je napredan browser, s visokim nivoom podrške za HTML5 koji svakim danom gomila nove korisnike. I uprkos četiri sloja sita za bugove (tj. tri pre-release vrste buildova: nightly, developer i beta), ovi se još uvijek provuku i do stabilne verzije.
Jedan takav bug dolazi iz ffmpeg biblioteke: open-source codec biblioteke koju Chrome koristi za reprodukciju zvuka. Ukoliko browser naiđe na loš segment Vorbis audio zapisa, koji se može desiti sasvim slučajno na validnom fajlu, doći će do ”assertion error”, umjesto da greška bude prijavljena kroz specifikacijom definisani API. Ovaj će se manifestovati kao ružna poruka o grešci prikazana direktno korisnicima. Pri ponovnom pokušaju reprodukcije, greška se neće prikazati, ali će čitava stranica u potpunosti zalediti…
Safari za Windows XP nema takve dramatične probleme, ali ako korisnik nije instalirao codece ručno, HTML5 audio će biti podržan, ali bez ijednog codeca. Ako s ovim niste računali, postoji varijanta da fallback na Flash player neće biti pravilno iskorišten. Da li to znači da treba odustati od HTML5 funkcija dok ove ne budu potpuno stabilne? Ne, ali treba biti pažljiviji.
Za početak, umjesto da vjerujete da browser podržava HTML5 pravilno, možete krenuti obratno: pretpostavite da ne podržava i koristite Flash player kao osnovu. Ako browser ne podržava Flash, upotrijebiti HTML5 audio (npr. za iOS korisnike). Ovakav pristup još uvijek poštuje filozofiju graceful degradation, ali polazi iz drugog smjera. Naravno, ove brige možete prepustiti i drugima. Biblioteka SoundManager2 će umjesto vas brinuti da li da koristi Flash player ili HTML5 audio.
Video u broweseru
Kao što smo rekli, reprodukcija zvuka je bila tek prvi dodir s novim multimedijalnim elementima. Istina, u najjednostavnijem slučaju, integracija videa je jednako jednostavna kao i ubacivanje fotografije:
<video src="/video/film.webm" width="640" height="480" controls></video>
No implementacija HTML5 videa je, u realnosti, nešto kompleksnija. Naime, da bi browser mogao prikazati film s mačkom koja svira klavir, on mora prije toga dekodirati video/audio zapis iz binarne datoteke.
Način na koji se ovaj binarni zapis prevodi u video, određuje video format, odnosno algoritam za dekodiranje. Potonji je implementiran softverski kao codec (složenica od coder-decoder), s tim da treba razdvojiti pojmove codec i kontejner. Kontejner je zadužen za to da zasebne video i audio zapise kombinuje u jednu datoteku. Na primjer, AVI, MOV i MPEG-4 su vrsta kontejnera, dok su Theora i H.264 vrste video, a MP3 i Vorbis audio codeca.
Danas postoji mnoštvo video formata koji se međusobno razlikuju po odnosu kvalitete i veličine fajla koji sadrži video zapis, ali i slobodi korištenja. Korištenje formata koji su zaštićeni patentima, ne nameće troškove krajnjim korisnicima, ali, kao što smo objasnili u prethodnom članku, distributeri softvera i hardvera za kodiranje i dekodiranje moraju platiti licence.
Kako webu mogu pristupiti mnogi, po specifikacijama drastično različiti uređaji, tako izbor codeca ima i dodatnu dimenziju. Dekodiranje videa je, naime, procesorski intenzivan zadatak, te se zato sve moderne grafičke kartice i pametni telefoni isporučuju s ugrađenim codec čipovima. Dostupnost čipova za određeni format je još jedan od faktora koji treba razmotriti prilikom izbora formata: softversko dekodiranje je sporije (što može dovesti do “trzavog” videa), ali i crpi više baterije.
Za web su danas relevantna tri codeca: Theora (u OGG kontejneru), H.264 (u MPEG-4 kontejneru) i VP8 (u WebM kontejneru). Theora je codec s najlošijim performansama od tri, te ne odgovara ni distributerima sadržaja, a ni korisnicima. Tim ni manje, format nije zaštićen patentima, te je radi toga dostupan u Linux distribucijama i većini browsera (Chrome, Firefox i Opera).
H.264 ima mnogo bolje performanse od Theore (sa više profila namijenim širokoj paleti aplikacija), ali je zaštićen patentima, koji mogu, ali i ne moraju biti validni na prostoru Bosne i Hercegovine i čitave Europske unije koja formalno ne priznaje softverske patente. No, proizvođači softvera (tj. browsera), nisu spremni testirati ovu teoriju na sudu te se Firefox i Opera isporučuju bez podrške za H.264. Microsoft i Apple su članovi MPEG LA grupe, grupe koja vlada patentima vezanim za ovaj format te Safari, Mobile Safari i Internet Explorer 9 podržavaju ovaj format nativno. Google je jedini bio spreman platiti troškove licence i isporučivati codec uz Chrome, ali su podršku izbacili početkom ove godine iz političkih razloga.
VP8 je format na koji je Google stekao pravo kupovinom firme On2, kompanije koja je razvila codec. Svi patenti vezani za njega su zatim učinjeni slobodnim (patent je nemoguće poništiti, ali je moguću učinit njegovo licenciranje besplatnim), a daljnji razvoj je nastavljen u open-source formi. Problem ovog formata je njegova svježina, odnosno to da još uvijek ne postoje uređaji sa čipovima za dekodiranje. Ovi čipovi će se uskoro početi distribuirati uz Android-bazirane telefone, ali još nema nikakvih naznaka o tome da li će biti podržani u iPhone-u ili Windows 7 telefonima, odnosno odgovarajućim mobilnim browserima.
Sve u svemu, nema jednostavnog odgovora na dilemu video codeca: ako želite koristiti HTML5 video u svim kompatibilnim browserima, morat ćete distribuirati isti video u sva tri formata: IE9, Safari i iPhone bez instalacije dodatnih plug-ina podržavaju samo H.264, dok WebM radi samo u posljednjim verzijama browsera koji su ranije podržavali Theoru.
Komplikovaniji pristup
Kôd za ubacivanje videa koji podržava više formata videa bi izgledao ovako:
<video width="640" height="480" controls> <source src="/video/film.webm" type='video/webm; codecs="vorbis,vp8"'> <source src="/video/film.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="/video/film.ogv"/video/film type='video/ogg; codecs="theora, vorbis"'></video><video> element ima funkcije definisane specifikacijom (kao što je npr. “canPlayType”). Ako je element podržan, onda treba testirati podršku za formate korištenjem funkcije canPlayType koja kao parametar prima naziv formata, a vraća vrijednost “probably”, “maybe” ili prazan string.Pošto je reprodukcija videa kompleksna stvar, browseri ne mogu s pouzdanošću tvrditi da će video biti u potpunosti podržan, te kao developeri moramo biti zadovoljni odgovorom ”probably” (“vjerovatno”). Odgovor ”maybe” (“možda”) će biti dovoljan u eksperimentalnim aplikacijama, a prazan string znači da podrške nema.
Naprimjer, da provjerimo da li je WebM/VP8 podržan:
var testElement = document.createElement("video");if (testElement.canPlayType) { // HTML5 video je podržan if (testElement.canPlayType('video/webm; codecs="vorbis,vp8"')) { // WebM je dostupan }}Ako je već potreban Flash fallback, da li se onda uopšte isplati mučiti oko HTML5 videa? Odgovor zavisi od namjene playera: ako želite da vaš sadržaj bude dostupan mobilnim korisnicima, onda je H.264 neophodan, kako je to jedini format koji svi mobilni uređaji hardverski podržavaju. Ako video integrišete na stranicu namijenjenu Linux entuzijastima, onda je HTML5 uz WebM/VP8 i OGG/Vorbis sasvim dovoljan.
Stanje HTML5 videa je danas daleko od stabilnog, ali stvari će se poboljšati ako i kada jedan od formata bude prihvaćen u svim browserima. Po svim indikacijama bi to trebao biti WebM, ali morat ćemo sačekati odgovor. Ne predugo, nadajmo se.
Napredne primjene videa
Video podrška u browserima je sve samo ne banalna. Uz jedan video zapis moguće je ubaciti i dodatne tajmirane tekstualne podatke, kao što su titlovi. Nažalost, ovaj dio specifikacije je u političkoj magli, jer još uvijek nije jasno koji format će se koristiti za definiciju traka. Originalni prijedlog WHAT-WG-a je bio novi format pod nazivom WebSRT, ali on je konfliktu sa W3C-em koji u svojoj golemoj biblioteci standarda već sadrži alternativnu specifikaciju za iste svrhe.
Radi ovakve situacije, još niti jedan browser ne podržava tajmirane trake, tako da su one spomenute ovdje iz teoretskog aspekta, ali i da pokažemo da video na webu može biti pristupačan svima, pa čak i korisnicima koji inače imaju teškoće pri korištenju kompjutera. Nažalost, HTML5 specifikacija trenutno ne spominje eksplicitno niti jedan protokol za streaming videa, te je jedini način za reprodukciju progresivni download (browser prikazuje preuzete dijelove videa).
Kako bi korisnici mogli preskočiti na dio videa koji nije preuzet, browseri mogu koristiti HTTP Range zaglavlje te time simulirati streaming. Ipak, pravi live streaming je zasad podržan samo u Safariju (i dosad ga je koristio Apple kako bi ponudio live streaming s vlastitih konferencija). Kako streaming donekle zavisi i od formata videa, ova priča sigurno neće biti u potpunosti riješena samo HTML specifikacijom i sigurno ne prije nego se riješi problem svedostupnog video codeca.
Inspiracija
Ono što čini HTML5 video posebno zanimljivim jesu efekti koji se mogu postići kombinovanjem videa, CSS-a, JavaScripta, te drugih novih HTML5 elemenata kao što je Canvas. JavaScript API za potonji omogućava kopiranje aktuelne sličice iz videa u canvas, gdje ga je moguće obrađivati piksel-po-piksel. HTML5Doctor je u oktobru 2010. godine objavio članak koji demonstrira samo nekoliko video+canvas trikova kao što su konverzija videa u crno-bijele nijanse, povećavanje videa ili dodavanje “emboss” efekta.
Jedan od zanimljivijih eksperimenata vezanih za video koji je bio uključen u Firefoxov Web O’(pen) Wonder je 360º video. Radi se o panoramskom video playeru u kojem je moguće mijenjati ugao gledanja i zoom korištenjem miša u realnom vremenu. Posljednji eksperiment je ujedno eksperiment na najvećem nivou.
YouTube već neko vrijeme podržava HTML5 video koji morate posebno uključiti. Video materijali su kodirani kao WebM i H.264 te rade u svim modernim browserima. Primijetit ćete da interfejs i rukovanje videom nije toliko precizno i ugodno kao interakcija s klasičnim Flash playerom, ali ovo može biti samo do toga što se radi o prvim pokušajima masovne implementacije.
Ovaj i slične eksperimente ipak treba smatrati samo inspiracijom, flash-forwardom, odnosno vodiljom za razvoj tehnologije. Oni nam ne govore šta je moguće danas, već šta će biti moguće za nekoliko godina. I priznajmo, uzbudljivo je.
Par linkova za kraj koji će vam pomoći s integracijom:
- Dive into HTML5 video
- WHAT-WG specifikacija za developere - video
- W3C HTML5 specifikacija- video
Komentari (0)