HTML5 videod 10 asja disainerid peavad teadma

HTML5 revolutsioon on põnevad veebidisainerid kõikjal maailmas. Uued kirjeldused toetavad kümneid elemente ja atribuute semantiliste veebilehtede loomiseks. Need uued funktsioonid hõlmavad audio- ja videoformaatide multimeedia silte.

Viimastel aastatel on Flash-põhine meediapleier rohkem kui piisav veebis voogesituseks ja see tehnoloogia on endiselt vajalik vanemate brauserite toetamiseks. Kuid tänapäeval on kaasaegsed standardid arenenud ja HTML5-videote lisamine avab uksed kümnetele uutele võimalustele.

Selles juhendis tahaksin tutvustada veebi HTML5 videot. Naturaalse brauseri mängija ja selle funktsionaalsuse mõistmiseks kulub mõningane praktika. Ja parim viis tuttavaks tundmiseks on pea eesmine sukeldumine!

1. Meedia tüübid

Flash-videopleieriga töötades on kõik tavaline, et kõik videoformaadid on seotud .flv-iga. Kuigi see toimib, ei saa enamik flv-faile kvaliteeti säilitada täpsemate failivormingute / koodekite läheduses. HTML5 toetavad kolme olulist videotüüpi: MP4, WebM ja Ogg / Ogv. MPEG-4 failitüüp on üldiselt kodeeritud H.264-s, mis võimaldab taasesitust kolmandates osapoolte Flash-mängijates. See tähendab, et varundamismeetodi toetamiseks ei ole vaja .flv videokoopiat hoida! WebM ja Ogg on kaks palju uuemat HTML5-videoga seotud failitüüpi. Ogg kasutab Theora kodeeringut, mis põhineb avatud lähtekoodiga standardheli failivormingul. Neid saab salvestada laiendiga .ogg või .ogv.

WebM on Google'i väljastatav projekt, mida saate rohkem lugeda WebM projekti veebilehelt. Seda vormingut toetab juba Opera, Google Chrome, Firefox 4+ ja viimati Internet Explorer 9. Enamik veebi spetsialiste ei ole seda veel teadlik, kuid WebM on veebivideo tulevikus videomaterjali juhtiv vorm.

2. Brauseri tugi

Nii et milline neist failitüüpidest teie veebisaidi jaoks on vajalik? Noh ideaalis kõik 3 oleks suurepärane, kui nad pakuvad täielikku tugispektrit. Ometi ei ole see realistlik, ja tegelikult võite katta kõik alused vaid kahega. Siin on iga brauseri tööde jaotus:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - HTML5, ainult välklamp!

Kui mäletate, mainisin varem, et enamik flash video mängijaid toetab MP4-faile nii kaua, kui nad on kodeeritud H.264-s. Sellisena kinnitab iga brauser MP4 + Flashi lõpliku abinõuna. See tähendab, et pead ainult looma kaks erinevate brauserite toetamiseks. MP4 Safari / IE9 jaoks ja valik WebM või Ogg vahel ülejäänud jaoks.

Minu arvates soovitan ma WebM-vormingus kinni pidada. Projekti taga on mõned suured nimed (nimelt Google) ja on HTML5 kogukonnas palju tõmbejõudu saanud. Ogg / Ogv toetatakse, kuid tõenäoliselt kaotab populaarsuse WebMi väiksematesse failisuurustesse. Sean Golliheri kirjutatud veebi video tuleviku kohta saate lugeda.

3. Lihtsa HTML5 videote kaasamine

Vaatame nüüd süntaksit, mis on vajalik mõne näidiskoodi sisestamiseks. Vajame ainult HTML5 videomärgist, et viidata iga filmi URL-ile.

Teade kontrolli ja automaatne esitamine atribuute ei ole vaja ühegi väärtusega seadistada. Ka mina sisaldasin a plakat atribuut, mis eelvaatab enne striimimist pildi üle videopleieri. See on tavaline eelvaade paljude veebi mängijatega.

Pakume nii videoelemendi sisemisi MP4 kui ka WebM formaate. Kui kumbagi neist ei saa laadida, kuvame kasutajale brauseri värskendamiseks vea.

4. Pakkumine Flash Fallback

Ülaltoodud näide sobib ideaalselt kõigile standarditele vastavatele veebibrauseritele. Siiski peame arvestama ka sellega, et maailm ei ole alati tehnoloogia tipptasemel. Peame toetama kasutajaid vanematel Safari, Mozilla Firefoxi ja eriti Internet Exploreri versioonidel.

Parim viis selle saavutamiseks on Flash-mängija. Neid saab lisada kasutades embed või objekti sildid viitavad kolmanda osapoole .swf-failile. JW Player ja Flowplayer on kaks tasuta avatud lähtekoodiga lahendust, mida saate kaaluda. Aga ka vaadake lisatasu videomängijaid ActiveDen'is, mis võivad minna nii odavaks kui $ 15- $ 20.

Nüüd näeme ülalolevat koodi, et lisada varasem Flash-mängija, et toetada peaaegu iga olemasolevat brauserit.

5. Mobiilseadme tugi

Seda teemat arutatakse ikka veel, kuna mobiilside on nii noor. Apple tuli välja MP4 toetuseks Mac ja iOS seadmetes. See tähendab, et saate .mp4 videofaile oma iPadis, iPhone'is või iPod Touchis tavapärasel video-kasutajaliidese abil voogedastada. See hõlmab palju turuosa.

Hiljuti oli Android-seadmetel keeruline aeg saada samale tasemele. Kuid Google on lõpuks vastu võtnud .mp4 veebi voogesituse, mis nüüd ära kasutab peaaegu kõiki mobiilikasutajaid. Ja kuna Flash ei ole siin võimalus, on MP4 parim lahendus. Sellepärast soovite kõigepealt .mp4-koodi kinnistada, et iOS-seadmed suudaksid faili kohe ära tunda.

6. Safari kasutajaagent

Üks viga, mida tuleb mainida, on üks Flash-mängijate ja natiivse HTML5 .mp4 voogesituse vahel Safaril. Kuna brauser suudab mõlemat faili toetada, võib tekkida probleeme HTML5 videovoo hankimisel Flashi asemel. Kuid tänu sellele suurepärasele TUAW-i blogipostile on lihtne sirvimise kasutajaagent muuta.

See sunnib teie veebilehte brauserit mõnes muus seadmes töötama. Tõenäoliselt valiksite iPadi, mis ei toeta ühtegi Flashi taasesitust. See on ainus peamine probleem, mida MP4 native & flash-taasesitusmeetodite testimisel võib tekkida.

7. Mängija juhtimisseadmete haldamine

Uskuge või mitte, on olemas ka meetodeid, mida saate kasutada HTML5 videomängija juhtelementide manipuleerimiseks. Seda saab teha JavaScripti abil, avades avatud meetoditest. Siin on liiga palju nimekirju, kuid proovige lisateabe saamiseks W3C meediumielemendi dokumente ära visata.

Üldise ettekujutuse andmiseks on Opera dev blogi postitanud mõned lühikesed õpetused, mis on suurepärased algajatele. Isegi kui te pole kunagi varem Java- või jQuery-kaarti üles võtnud, on see ikka veel kerge tabada. Võite helistada videomeedi teatud atribuutidele, näiteks vaigistatud või currentTime. Siis võiksite nende kriteeriumide alusel teostada toiminguid (taustaks muuta, kuvareklaame), manipuleerides DOM-i jQuery'is.

Sama arendaja Opera artiklis pakub oma skriptitud videopleieri demot. Võimalus kohandada oma kasutajaliidese juhtelemente on täitmata. See lihtsalt näitab, kui tugev HTML5-video on muutumas.

8. Video vormingu teisendamine

See on veel üks suur probleem, mis tõenäoliselt segab vähem tehniliselt mõistlikke inimesi. Sa tahad lihtsalt oma veebisaiti üles ja striimida ning nüüd peate tegelema videote konverteerimisega? Noh, see pole tegelikult nii raske.

Et tegeleda MP4-ga, mis on teie suurim prioriteet, saate kasutada HandBrake'i, mis on tasuta avatud lähtekoodiga lahendus, mis töötab kõigis kolmes peamises operatsioonisüsteemis. See toetab H.264-i koos mõne teise koodekiga, mis teeb selle parimaks valikuks vabakutseliste kasutajate jaoks. Kui teil on raha, et seda ära hoida, pean soovitama Xilisofti konverterit, mis on Mac App Store'is ainult $ 40 eluea litsentsi jaoks.

See näeb välja nagu WebM-marsruut muudab elu palju lihtsamaks. Miro Video Converter on tasuta tööriist Windowsi ja OS X jaoks, mis toodab suurepäraseid WebM-faile. Samuti saab seda teha ka Ogg Theora kodeeringuga, mis väljub ka päris suurepärase kvaliteediga.

9. Veebimängija ehitamine

HTML5-spetsifikatsiooniga videoformaadid on arendajatele veel uued. On avatud protokollid, mis ootavad, et neid saaks mängida, et võimaldada kohandatud juhtelemente, liugureid, esituse / pausi ikoone jne. Kui te tunnete julgeid, vaadake seda juhendit oma HTML5-mängija loomise kohta (avaldatud Splashnology'is).

Kood on uustulnukate jaoks veidi intensiivne, kuna see nõuab täiustatud CSS-i sihtimist ja natuke formaalset jQuery-d. On ka teisi raamistikke, millele saab tugineda juba kohandatud mängukujundusele. Samamoodi on see slaidiesitluse esitlus suurepärane tutvustus HTML5 videopleieri loomisele.

HTML5 videopleieri loomine

10. VideoJSi raamatukogu

VideoJS on ilmselt minu lemmik lahendus HTML5 videopleieritele. Kõik, mida vajame, on nende enda hostitud JavaScript ja CSS-i laaditabel, mis on teie dokumendis kusagil. Seejärel kirjutage standardne HTML5 videokood mõnele lisaklassile nülgimiseks. Lisasin allpool oma näidiskoodi:

Kui juhtub, et käivitate WordPressi blogi, võite proovida ka nende kohandatud WP-pluginaid. See sisaldab automaatselt raamatukogu js / css lehekülgedel, kus kuvatakse HTML5-videot. Ja seda saate teha ükskõik millises postituses või lehekülje redaktoris, kasutades lühikoode (vaata siit).

Järeldus

Loodan, et see sissejuhatav juhend võib segada teie huvi veebivideo tuleviku vastu. Kui mobiilile pöörduvad rohkem kasutajad, on oluline, et HTML5 standardid oleksid sellist tüüpi meediumitele vastu võetud. Veeb peaks olema lihtsam, et arendajad saaksid palju kiiremini toota täielikult toetatud lahendusi. Soovime kuulda teie ideid ja ettepanekuid HTML5 video tuleviku kohta. Kui soovid jagada, jätke palun kommentaar allpool olevasse arutelupiirkonda.