Video posnetki HTML5 10 stvari, ki jih morajo oblikovalci vedeti

HTML5 revolucija je razburljiv spletni oblikovalci iz vseh področij sveta. Nove specifikacije podpirajo ducate elementov in atributov za izgradnjo semantičnih spletnih mest. Te nove funkcije vključujejo multimedijske oznake za avdio in video formate.

V preteklih letih je bil Flash, ki temelji na multimedijskem predvajalniku, več kot dovolj za pretakanje po spletu in ta tehnologija je še vedno potrebna za podporo starejšim brskalnikom. Ampak hvaležni sodobni standardi so napredovali in vključitev videa HTML5 odpira vrata za desetine novih priložnosti.

V tem priročniku vam želim ponuditi uvod v video HTML5 za splet. Potrebno bo nekaj prakse za razumevanje domačega brskalnika in njegove funkcionalnosti. Najboljši način za spoznavanje je potapljanje v glavo!

1. Vrste medijev

Ko delate s predvajalnikom videoposnetkov flash, je prepogosto povezati vse video formate v .flv. Čeprav to ne deluje, večina datotek flv ne more ohraniti kakovosti v bližini naprednejših formatov datotek / kodekov. Obstajajo 3 pomembne vrste video posnetkov, ki jih podpira HTML5: MP4, WebM in Ogg / Ogv. Tip datoteke MPEG-4 je običajno kodiran v H.264, kar omogoča predvajanje v drugih predvajalnikih Flash. To pomeni, da vam ni treba obdržati videoposnetka .flv, ki podpira nadomestno metodo! WebM in Ogg sta dve veliko novejši vrsti datotek, povezanih z videom HTML5. Ogg uporablja kodiranje Theora, ki temelji na standardnem formatu zvočne datoteke odprte kode. Te lahko shranite s pripono .ogg ali .ogv.

WebM je projekt, ki ga je izdal Google, o katerem lahko preberete več na spletni strani projekta WebM. Obliko že podpirajo Opera, Google Chrome, Firefox 4+ in nazadnje Internet Explorer 9. Večina spletnih strokovnjakov še vedno ni poznana, vendar je WebM v prihodnosti spletni videoposnetek vodilni videoposnetek..

2. Podpora za brskalnik

Torej, katere od teh vrst datotek potrebujete za vašo spletno stran? V najboljšem primeru bi bilo vse 3 velike, saj zagotavljajo celoten spekter podpore. Vendar to ni realistično in dejansko lahko vse baze pokrijete le z dvema. Tukaj je razčlenitev tega, kar deluje za vsak brskalnik:

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

Če se spomnite, sem prej omenil, da bo večina video predvajalnikov flash podpirala datoteke MP4, dokler bodo kodirane v H.264. Kot tak, bo vsak od teh brskalnikov vgradil MP4 + Flash kot zadnjo možnost. To pomeni, da morate le ustvariti dva različnih video formatov, ki podpirajo vse brskalnike. MP4 za Safari / IE9 in izbira med WebM ali Ogg za ostalo.

Po mojem mnenju močno priporočam, da se držite formata WebM. Ima nekaj velikih imen za projektom (in sicer Google) in je pridobila veliko vleka v skupnosti HTML5. Ogg / Ogv bo podprt, vendar bo najverjetneje izgubil priljubljenost za manjše velikosti datotek WebM. Lahko si preberete povezano besedilo o prihodnosti videa na spletu, ki ga je napisal Sean Golliher.

3. Vdelava preprostih videoposnetkov HTML5

Poglejmo si sintakso, ki je potrebna za vdelavo vzorčne kode. Vse, kar potrebujemo, je oznaka videa HTML5 za sklicevanje na URL vsakega filma.

Obvestilo kontrole in samodejno predvajanje atributov ni treba nastaviti z nobeno vrednostjo. Vključil sem tudi a plakata atribut, ki pred predvajanjem prednastavi sliko prek video predvajalnika. To je običajen predogled s številnimi spletnimi predvajalniki.

Notranji video element nudimo tako MP4 kot WebM. Če ni mogoče naložiti nobenega od njiju, prikažemo napako, da uporabnik posodobi svoj brskalnik.

4. Ponudba Flash Fallback

Zgornji primer je idealen za vse spletne brskalnike, ki so skladni s standardi. Vendar moramo upoštevati tudi, da svet ni vedno na vrhuncu tehnologije. Uporabnike moramo podpirati v starejših različicah Safari, Mozilla Firefox in zlasti Internet Explorerju.

Najboljši način za dosego tega cilja je pomožni predvajalnik Flash. Te je mogoče dodati z uporabo vdelati ali predmet oznake za sklicevanje na datoteko .swf tretje osebe. JW Player in Flowplayer sta dve brezplačni odprtokodni rešitvi, ki ju lahko upoštevate. Ampak tudi preverite premium video predvajalniki na ActiveDen, ki lahko gredo tako poceni kot $ 15 - $ 20.

Zdaj pa nastavimo kodo zgoraj, da vključimo pomožni predvajalnik Flash, ki podpira skoraj vsak obstoječi brskalnik.

5. Podpora za mobilne naprave

Ta tema se še vedno zelo razpravlja, saj je mobilna industrija tako mlada. Apple je ponudil podporo za MP4 na napravah Mac in iOS. To pomeni, da lahko na običajnem video uporabniškem vmesniku pretakate video datoteke .mp4 na iPad, iPhone ali iPod Touch. To zajema veliko tržnega deleža.

V zadnjem času so naprave Android težko dobile to raven podpore. Vendar pa je Google končno sprejel .mp4 spletni prenos, ki zdaj izkorišča skoraj vse mobilne uporabnike. In ker Flash ni izbira, je MP4 najboljša rešitev. Zato želite kodo .mp4 najprej vdelati, tako da iOS naprave lahko takoj prepoznajo datoteko.

6. Uporabniški agent za Safari

Eden od hroščev, ki jih je treba omeniti, je eden izmed obstoječih Flash predvajalnikov in izvornega HTML5 .mp4 pretakanja na Safariju. Ker lahko brskalnik podpira obe datoteki, boste morda težko dobili videoposnetek HTML5 v mestu Flash. Vendar pa zahvaljujoč temu odličnemu blogu na TUAW lahko preprosto spremenite uporabniški agent brskanja.

To bo vašo spletno stran prisililo, da bo brskalnik prepoznal, da se izvaja v drugi napravi. Najverjetneje bi izbrali iPad, ki NE podpira nobenega predvajanja Flash. To je edina pomembna težava, na katero lahko naletite, ko preizkušate metode MP4 native & flash playback.

7. Upravljanje nadzornikov predvajalnika

Verjeli ali ne, obstajajo tudi metode, s katerimi lahko manipulirate s kontrolniki video predvajalnikov HTML5. Vse to lahko storite v JavaScriptu tako, da povlečete iz niza odprtih metod. Obstaja preveč, da bi jih tukaj lahko poimenovali, vendar poskusite prebrskati dokumente medijskih elementov W3C za več podrobnosti.

Da bi vam dali splošno idejo, je blog opera Opera objavil nekaj kratkih vaj, ki so odlične za začetnike. Tudi če še niste nikoli izbrali JavaScripta ali jQuery, je še vedno preprosto, da se s tem ujamete. Lahko pokličete na posebne atribute video medijev, kot so utišan ali Trenutni čas. Nato lahko izvedete dejanja (zatemnite ozadje, prikaz oglasov) na podlagi teh meril, tako da manipulirate DOM v jQuery.

Isti razvijalec v članku Opera zagotavlja delovni demo njihovega predvajanega video posnetka. Priložnost za prilagajanje lastne kontrole uporabniškega vmesnika je izjemna. To samo kaže, kako močan je video HTML5.

8. Pretvorba video formatov

To je še eno veliko vprašanje, ki bo verjetno zmedlo manj tehnološko zdrave posameznike. Vi samo želite, da se vaše spletne strani in pretakanje in zdaj ste se ukvarjajo s pretvorbo video posnetkov? Pravzaprav ni tako težko.

Za obravnavo MP4, ki je vaša največja prioriteta, lahko uporabite HandBrake, ki je brezplačna, odprta rešitev, ki deluje na vseh treh glavnih operacijskih sistemih. Podprla bo H.264 in nekaj drugih kodekov, zaradi česar je to najboljša možnost za freebie uporabnike. Če imate denar za lovljenje, moram priporočiti Xilisoftov pretvornik, ki je na Mac App Store za samo 40 $ doživljenjsko licenco..

Izgleda, da pot WebM omogoča veliko lažje življenje. Miro Video Converter je brezplačno orodje za Windows in OS X, ki ustvarja kakovostne datoteke WebM. Lahko tudi Ogg Theora encoding, ki pride ven s precej veliko kakovosti, kot dobro.

9. Izdelava spletnega predvajalnika

Video formati s specifikacijami HTML5 so še vedno novi za razvijalce. Obstajajo odprti protokoli, ki čakajo, da se predvajajo, da omogočijo kontrole po meri, drsnike, ikone za predvajanje / pavzo itd..

Koda je malce intenzivna za novince, saj zahteva napredno CSS ciljanje in malo formalne jQuery. Obstajajo še drugi okviri, na katerih lahko gradite že po meri. Podobno je ta predstavitev diaprojekcije odličen uvod v izdelavo predvajalnika videa HTML5.

10. Knjižnica VideoJS

VideoJS je verjetno moja najljubša rešitev za video predvajalnike HTML5. Vse kar potrebujete je, da je v vašem dokumentu nekje v vašem dokumentu vključen JavaScript in CSS slog. Nato napišete standardno kodo HTML5 z nekaj dodatnimi razredi za odiranje. Spodaj sem dodal vzorec kode:

Če se zgodi, da zaženete WordPress blog, lahko poskusite tudi njihov WP plugin po meri. Samodejno bo vključila knjižnico js / css na straneh, na katerih prikažete videoposnetek HTML5. To lahko storite iz vsake objave ali urejevalnika strani s kratkimi kodami (glej tukaj).

Zaključek

Upam, da bo ta uvodni vodnik vzbudil vaše zanimanje za prihodnost spletnega videa. Ker se več uporabnikov obrača na mobilne naprave, je pomembno, da so za te vrste medijev sprejeti standardi HTML5. Splet je treba poenostaviti, tako da lahko razvijalci izdelajo rešitve, ki so popolnoma podprte, veliko hitreje. Radi bi slišali vaše zamisli in predloge za prihodnost videa HTML5. Če želite deliti, prosim pustite komentar v spodnjem razpravnem prostoru.