HTML5 videozapisi 10 stvari koje dizajneri trebaju znati

HTML5 revolucija je uzbudljiva web dizajnera iz svih područja svijeta. Nove specifikacije podržavaju desetke elemenata i atributa za izgradnju semantičkih web-mjesta. Te nove značajke uključuju multimedijske oznake za audio i video formate.

U proteklim godinama Flash-bazirani media player bio je više nego dovoljan za streaming na Webu i ova tehnologija je još uvijek potrebna za podršku starih preglednika. No, zahvaljujući modernim standardima napredovali su i uključivanje HTML5 videozapisa otvara vrata za desetke novih mogućnosti.

U ovom vodiču želim vam ponuditi uvod u HTML5 video za Web. Potrebna je neka praksa za razumijevanje izvornog playera u pregledniku i sve njegove funkcionalnosti. A najbolji način da se upoznate je da se najprije roni u glavi!

1. Vrste medija

Kada radite s flash video uređajem, previše je uobičajeno povezivati sve formate videozapisa u .flv. Iako to ne funkcionira, većina flv datoteka ne može zadržati kvalitetu bilo gdje u blizini naprednijih formata datoteka / kodeka. Postoje 3 važne vrste videozapisa koje podržava HTML5: MP4, WebM i Ogg / Ogv. MPEG-4 vrsta datoteke obično je kodirana u H.264 koja omogućuje reprodukciju u Flash playerima treće strane. To znači da ne morate zadržavati kopiju .flv kako biste podržali zamjensku metodu! WebM i Ogg su dvije mnogo novije vrste datoteka koje se odnose na HTML5 videozapis. Ogg koristi kodiranje Theora koje se temelji na standardnom formatu audio datoteke otvorenog izvornog koda. One se mogu spremiti s nastavkom .ogg ili .ogv.

WebM je projekt koji je izradio Google, a više o tome možete pročitati na web-stranici WebM Projekta. Format već podržavaju Opera, Google Chrome, Firefox 4+ i nedavno Internet Explorer 9. Većina web profesionalaca još uvijek nije poznata, ali WebM je vodeći format video medija u budućnosti web-videozapisa.

2. Podrška pregledniku

Dakle, koje od ovih vrsta datoteka trebate za vašu web-lokaciju? Pa u idealnom slučaju, sve tri bi bile izvrsne jer pružaju puni spektar podrške. Ipak, ovo nije realno, i zapravo, možete pokriti sve baze sa samo dvije od njih. Slijedi pregled onoga što funkcionira za svaki preglednik:

Mozilla Firefox - WebM, Ogg
Google Chrome - WebM, Ogg
Opera - WebM, Ogg
Safari - MP4
Internet Explorer 9 - MP4
Internet Explorer 6-8 - Nema HTML5, samo Flash!

Ako se sjećate, ranije sam spomenuo da će većina flash video uređaja podržavati MP4 datoteke sve dok su kodirane u H.264. Kao takav, svaki od ovih preglednika će ugraditi MP4 + Flash kao posljednje rješenje. To znači da samo trebate stvoriti dva različitih video formata koji podržavaju sve preglednike. MP4 za Safari / IE9 i izbor između WebM ili Ogg za ostatak.

Po mom mišljenju ja visoko preporučiti držati s WebM formatu. Ima nekoliko velikih imena iza projekta (naime Google) i stekao je veliku vuču u HTML5 zajednici. Ogg / Ogv će biti podržan, ali će najvjerojatnije izgubiti popularnost za manje veličine datoteka WebM-a. Možete pročitati članak o budućnosti videozapisa na webu koji je napisao Sean Golliher.

3. Ugradnja jednostavnih HTML5 videozapisa

Pogledajmo sada sintaksu koja je potrebna za ugradnju nekog uzorka koda. Sve što nam treba je HTML5 oznaka videozapisa za referencu svakog URL-a filma.

Primijetite kontrole i auto Play atributi ne moraju biti postavljeni s bilo kojim vrijednostima. Također sam uključio a poster atribut koji unaprijed učitava sliku preko video playera prije streaminga. Ovo je uobičajeni pregled s mnogim web-igračima.

Unutar video elementa nudimo i MP4 i WebM formate. Ako nijedno od njih nije moguće učitati, prikazuje se pogreška da korisnik ažurira svoj preglednik.

4. Ponuda flash memorije

Gore navedeni primjer savršen je za sve web-preglednike koji su usklađeni sa standardima. Ipak, moramo također uzeti u obzir da svijet nije uvijek na vrhuncu tehnologije. Moramo podržati korisnike na starijim verzijama Safari, Mozilla Firefox, a posebno Internet Explorer.

Najbolji način da to postignete je Flash player. Oni se mogu dodati pomoću ugraditi ili objekt oznake za referencu treće strane .swf datoteke. JW Player i Flowplayer su dva slobodna open source rješenja koja možete razmotriti. Ali također provjerite premium video playere na ActiveDen-u koji mogu biti jeftiniji od $ 15 - $ 20.

Sada ćemo podesiti gornji kod kako bismo uključili zamjenski Flash player koji podržava gotovo svaki postojeći preglednik.

5. Podrška za mobilne uređaje

O ovoj se temi i dalje jako raspravlja jer je mobilna industrija tako mlada. Apple je izašao s podrškom za MP4 na Mac i iOS uređajima. To znači da na standardnom video korisničkom sučelju možete reproducirati video datoteke .mp4 na svom uređaju iPad, iPhone ili iPod Touch. To pokriva puno tržišnog udjela.

Nedavno su uređaji s Androidom teško podnosili istu razinu podrške. Međutim Google je konačno usvojio .mp4 web streaming koji sada kapitalizira na gotovo svim mobilnim korisnicima. Budući da Flash nije opcija, MP4 je najbolje rješenje. Zbog toga prvo želite ugraditi .mp4 kôd kako bi iOS uređaji mogli odmah prepoznati datoteku.

6. Safari korisnički agent

Jedan bug koji se mora spomenuti je jedan koji postoji između Flash playera i izvornog HTML5 .mp4 streaminga na Safariju. Budući da preglednik može podržavati obje datoteke, možda ćete imati poteškoća s preuzimanjem HTML5 videozapisa umjesto Flasha. Međutim, zahvaljujući ovom sjajnom blogu na TUAW-u, lako je promijeniti korisnički korisnički preglednik.

To će prisiliti vašu web-stranicu da prepozna preglednik koji radi na drugom uređaju. Najvjerojatnije bi ste odabrali iPad, koji NE podržava nikakvu reprodukciju Flash-a. Ovo je jedini veliki problem na koji možete naići prilikom testiranja MP4 izvornih i flash metoda reprodukcije.

7. Upravljajte kontrolama igrača

Vjerovali ili ne, postoje i metode koje možete upotrijebiti za upravljanje HTML5 kontrolama video playera. Sve se može obaviti u JavaScriptu povlačenjem iz skupa otvorenih metoda. Postoji previše načina da se ovdje nabroji, ali pokušajte pregledati dokumente W3C medija za više detalja.

Da bi vam dala opću ideju, Opera dev blog je objavio nekoliko kratkih tutorijala koji su izvrsni za početnike. Čak i ako nikada prije niste pokupili JavaScript ili jQuery, još uvijek je jednostavno pogoditi zemlju s ovom. Možete pozvati određene atribute video medija kao što su prigušen ili Trenutno vrijeme. Tada možete izvesti akcije (prigušiti pozadinu, prikazati oglase) na temelju tih kriterija manipuliranjem DOM-a u jQuery.

Isti programer u članku Opere nudi radni demo njihovih skriptiranih video playera. Prilika za prilagodbu vlastitih kontrola korisničkog sučelja je izvanredna. To samo pokazuje kako snažan HTML5 videozapis postaje.

8. Pretvorba video formata

Ovo je još jedno veliko pitanje koje će vjerojatno zbuniti pojedince koji su manje pametni. Vi samo želite da se vaše web stranice gore i streaming i sada morate nositi s pretvoriti video? Pa to zapravo i nije tako teško.

Da biste se nosili s MP4 koji je vaš najveći prioritet, možete koristiti HandBrake koji je besplatno, open source rješenje koje radi na sve 3 glavne OS. To će podržati H.264 zajedno s nekoliko drugih kodeka što čini ovu najbolju opciju za freebie korisnike. Ako imate novac za isporuku, moram preporučiti Xilisoft konverter koji je na Mac App Storeu za samo 40 $ doživotne licence.

Izgleda kao da WebM put čini život mnogo lakšim. Miro Video Converter je besplatan alat za Windows i OS X koji proizvodi odlične WebM datoteke. To također može učiniti Ogg Theora kodiranje koje izlazi s prilično velike kvalitete kao dobro.

9. Izrada web-playera

Video formati s HTML5 specifikacijama su još uvijek novi za programere. Postoje otvoreni protokoli koji samo čekaju da se igraju kako bi omogućili prilagođene kontrole, klizače, ikone za reprodukciju / pauzu itd. Ako se osjećate hrabro, pogledajte ovaj vodič o tome kako napraviti svoj vlastiti HTML5 player (objavljen na Splashnologiji).

Kôd je pomalo intenzivan za pridošlice jer zahtijeva napredno CSS ciljanje i malo formalne jQuery. Postoje i drugi okviri na kojima već možete izraditi prilagođeni dizajn igrača. Slično je i prezentacija slidesharea odličan uvod u izgradnju HTML5 video playera.

Izrada HTML5 video playera

10. VideoJS Knjižnica

VideoJS je vjerojatno moje omiljeno rješenje za HTML5 video playere. Sve što trebate je JavaScript i CSS stil koji su uključeni negdje u vašem dokumentu. Onda napišete standardni HTML5 video kod s nekim dodatnim razredima za skinning. U nastavku sam dodao njihov uzorak koda:

Ako se dogodi da pokrenete WordPress blog, možete isprobati i njihov prilagođeni WP plugin. Automatski će uključiti knjižnicu js / css na stranice na kojima prikazujete HTML5 videozapis. To možete učiniti unutar bilo kojeg posta ili uređivača stranica pomoću kratkih kodova (pogledajte ovdje).

Zaključak

Nadam se da ovaj uvodni vodič može potaknuti vaše zanimanje za budućnost web-videozapisa. Budući da se više korisnika okreće mobilnom, važno je da se za te vrste medija prihvate HTML5 standardi. Web bi trebao biti jednostavniji kako bi programeri mogli brže proizvesti rješenja koja su potpuno podržana. Voljeli bismo čuti vaše ideje i prijedloge za budućnost HTML5 videozapisa. Ako želite podijeliti, slobodno ostavite komentar u području za raspravu u nastavku.