HTML5-videot 10 asiaa suunnittelijoiden täytyy tietää

HTML5-vallankumous on jännittäviä web-suunnittelijoita eri puolilta maailmaa. Uudet eritelmät tukevat kymmeniä elementtejä ja ominaisuuksia semanttisten sivustojen rakentamiseen. Näihin uusiin ominaisuuksiin kuuluvat multimedia- tunnisteet ääni- ja videoformaateille.

Viime vuosina Flash-pohjainen mediasoitin on enemmän kuin riittävä suoratoistoon Webissä ja tämä tekniikka on edelleen tarpeen vanhojen selainten tukemiseksi. Mutta onneksi nykyaikaiset standardit ovat edenneet ja HTML5-videon lisääminen avaa ovia kymmenille uusille mahdollisuuksille.

Tässä oppaassa haluaisin tarjota esittelyn HTML5-videosta Webissä. Se vie jonkin verran käytäntöä, jotta ymmärrät kotona olevan selaimen soittimen ja kaikki sen toiminnot. Ja paras tapa tutustua on sukellus päähän!

1. Median tyypit

Kun työskentelet flash-videosoittimen kanssa, on liian yleistä liittää kaikki videoformaatit. Vaikka tämä ei toimi, useimmat flv-tiedostot eivät pysty säilyttämään laatua mihin tahansa edistyneempiin tiedostomuotoihin / koodekkeihin. HTML5: MP4, WebM ja Ogg / Ogv tukevat 3 tärkeää videotyyppiä. MPEG-4-tiedostotyyppi on yleensä koodattu H.264: ssä, joka mahdollistaa toiston kolmannen osapuolen Flash-soittimissa. Tämä tarkoittaa, että sinun ei tarvitse pitää .flv-videokuvaa, jotta kannatat varmuuskopiointimenetelmää! WebM ja Ogg ovat kaksi paljon uudempia HTML5-videoon liittyviä tiedostotyyppejä. Ogg käyttää Theoran koodausta, joka perustuu avoimen lähdekoodin standardiäänitiedostomuotoon. Ne voidaan tallentaa .ogg- tai .ogv-laajennuksella.

WebM on Googlen esittämä projekti, jonka voit lukea lisää WebM-projektin verkkosivustosta. Opera, Google Chrome, Firefox 4+ ja viimeisin Internet Explorer 9 ovat jo tukeneet muotoa. Useimmat web-ammattilaiset eivät vielä tiedä sitä, mutta WebM on johtava videomediaformaatti web-videon tulevaisuudessa.

2. Selaimen tuki

Joten mitä näistä tiedostotyypeistä tarvitset sivustossasi? Hyvin ideaalisesti kaikki 3 olisivat hyviä, koska ne tarjoavat täyden tukispektrin. Silti tämä ei ole realistinen, ja itse asiassa voit peittää kaikki emäkset vain kahdella. Seuraavassa on erittely siitä, mitä jokaisella selaimella toimii:

Mozilla Firefox - WebM, Ogg
Google Chrome - WebM, Ogg
Opera - WebM, Ogg
Safari - MP4
Internet Explorer 9 - MP4
Internet Explorer 6-8 - Ei HTML5: tä, vain salamaa!

Jos muistat, aiemmin mainitsin, että useimmat flash-videopelaajat tukevat MP4-tiedostoja niin kauan kuin ne on koodattu H.264: ssä. Jokainen näistä selaimista upottaa MP4 + Flashin lopullisena keinona. Tämä tarkoittaa, että sinun tarvitsee vain luoda kaksi eri videoformaatteja kaikkien selainten tukemiseksi. MP4 Safari / IE9: lle ja valinta WebM: n tai Oggin välillä.

Mielestäni suosittelen, että pidät WebM-muodossa. Siinä on joitakin suuria nimiä projektin takana (nimittäin Google) ja se on saanut paljon vetoa HTML5-yhteisössä. Ogg / Ogv-tiedostoa tuetaan, mutta todennäköisesti se menettää suosionsa WebM: n pienempiin tiedostokokoihin. Voit lukea Sean Golliherin kirjoittaman web-videon tulevaisuutta käsittelevän teoksen.

3. Yksinkertaisten HTML5-videoiden upottaminen

Tarkastellaan nyt syntaksi, joka tarvitaan jonkin mallikoodin upottamiseen. Tarvitsemme vain HTML5-videoleiman, joka viittaa jokaisen elokuvan URL-osoitteeseen.

Huomaa ohjaimet ja automaattinen toisto määritteitä ei tarvitse asettaa millään arvoilla. Mukana oli myös a juliste attribuutti, joka lataa kuvan videonauhurin yli ennen suoratoistoa. Tämä on yleinen esikatselu monilla web-soittimilla.

Tarjoamme sekä MP4- että WebM-formaatteja videoelementin sisällä. Jos kumpaakaan näistä ei voi ladata, näyttöön tulee virhe, jonka avulla käyttäjä voi päivittää selaimensa.

4. Tarjoaa takaisinsytytyksen

Yllä oleva esimerkki on täydellinen kaikille standardien mukaisille selaimille. Meidän on kuitenkin myös otettava huomioon, että maailma ei ole aina tekniikan huipputasolla. Meidän on tuettava käyttäjiä vanhemmissa Safarin, Mozilla Firefoxin ja erityisesti Internet Explorerin versioissa.

Paras tapa saavuttaa tämä on Flash-takaisinsoittajan kautta. Nämä voidaan lisätä käyttämällä upottaa tai esine tunnisteita viittaamaan kolmannen osapuolen .swf-tiedostoon. JW Player ja Flowplayer ovat kaksi ilmaista avoimen lähdekoodin ratkaisua, joita voit harkita. Mutta myös tutustu Premium-soittimiin ActiveDenissä, jotka voivat mennä yhtä halvalla kuin $ 15 - $ 20.

Nyt näytä yllä oleva koodi, jotta voit sisällyttää varajäsenen Flash-soittimen tukemaan lähes jokaista olemassa olevaa selainta.

5. Mobiililaitteen tuki

Tätä aihetta käsitellään edelleen hyvin, koska mobiiliteollisuus on niin nuori. Apple palasi MP4: n tukemiseen Mac- ja iOS-laitteissa. Tämä tarkoittaa, että voit luonnollisesti siirtää .mp4-videotiedostoja iPadiin, iPhoneen tai iPod Touchiin tavallisessa videon käyttöliittymässä. Tämä kattaa paljon markkinaosuutta.

Äskettäin Android-laitteilla oli vaikea päästä samaan tukitasoon. Google on kuitenkin vihdoin hyväksynyt .mp4-web-suoratoiston, joka nyt hyödyntää lähes kaikkia mobiilikäyttäjiä. Ja koska Flash ei ole vaihtoehto täällä, MP4 on paras ratkaisu. Siksi haluat upottaa .mp4-koodin ensin niin, että iOS-laitteet voivat tunnistaa tiedoston välittömästi.

6. Safari-käyttäjäagentti

Yksi virhe, joka on mainittava, on Flash-soittimien ja natiivin HTML5 .mp4-suoratoiston välillä Safarissa. Koska selain voi tukea molempia tiedostoja, saatat joutua hankkimaan HTML5-videovirtaa Flashin sijasta. Kiitos TUAW: n loistavasta blogiviestistä on kuitenkin helppo vaihtaa selaimen käyttäjäagenttia.

Tämä pakottaa verkkosivusi tunnistamaan selaimen olevan käynnissä toisessa laitteessa. Todennäköisesti valitsisit iPadin, joka ei tue mitään Flash-toistoa. Tämä on ainoa suuri ongelma, johon saatat törmätä, kun testataan MP4-natiivia & flash-toisto-menetelmiä.

7. Hallitse soittimen ohjaimia

Uskokaa tai älä ole myös menetelmiä, joilla voit manipuloida HTML5-videosoitinohjaimia. Kaikki tämä voidaan tehdä JavaScriptissä vetämällä avoimista menetelmistä. Tässä on liian monta luetteloa, mutta yritä ohittaa W3C-mediaelementin asiakirjat.

Voit antaa sinulle yleisen käsityksen siitä, että Opera dev -blogi on lähettänyt joitakin lyhyitä opetusohjelmia, jotka ovat hyviä aloittelijoille. Vaikka et ole koskaan ottanut JavaScript- tai jQuery-ohjelmaa aikaisemmin, se on silti helppo osua maahan, kun tämä on käytössä. Voit soittaa tietyille videomateriaalin ominaisuuksille, kuten vaimea tai nykyinen aika. Sitten voit suorittaa nämä kriteerit (hämmentää taustaa, näyttää mainoksia) manipuloimalla DOM: a jQueryssä.

Sama kehittäjä Opera-artikkelissa tarjoaa toimivan demon heidän käsikirjoitetusta videopelaajastaan. Mahdollisuus muokata omia käyttöliittymän hallintasi on erinomainen. Se vain osoittaa, kuinka voimakas HTML5-video on tulossa.

8. Videomuodon muuntaminen

Tämä on toinen suuri ongelma, joka todennäköisesti sekoittaa vähemmän teknisiä taitoja. Haluat vain saada sivustosi ylös ja suoratoistona, ja nyt sinun on käsiteltävä videoiden muuntamista? No se ei todellakaan ole niin vaikeaa.

Käsitelläksesi MP4: tä, joka on suurin prioriteetti, voit käyttää HandBrake-ohjelmaa, joka on ilmainen, avoimen lähdekoodin ratkaisu, joka toimii kaikilla kolmella tärkeällä käyttöjärjestelmällä. Se tukee H.264: ää yhdessä muutamien muiden koodekkien kanssa, mikä tekee tästä parhaan vaihtoehdon freebie-käyttäjille. Jos sinulla on rahaa, jolla voit sulkea pois, minun on suositeltava Xilisoft-muunninta, joka on Mac App Storessa vain 40 dollarin elinikäisen lisenssin osalta.

Se näyttää, että WebM-reitti helpottaa elämää. Miro Video Converter on ilmainen työkalu Windowsille ja OS X: lle, joka tuottaa laadukkaita WebM-tiedostoja. Se voi myös tehdä Ogg Theoran koodauksen, joka tulee hyvin laadukkaaksi.

9. Web-soittimen rakentaminen

Videoformaatit, joissa on HTML5-spesifikaatioita, ovat edelleen uusia kehittäjille. On olemassa avoimia protokollia, jotka odottavat pelaamista mukautettujen ohjainten, liukusäätimien, toisto- / taukokuvakkeiden jne. Sallimiseksi..

Koodi on vähän voimakas uusille tulokkaille, koska se vaatii kehittyneitä CSS-kohdistuksia ja hieman muodollista jQuery-ohjelmaa. On olemassa myös muita kehyksiä, joihin voit jo tarjota räätälöidyn soittimen suunnittelun. Samoin tämä diaesityksen esitys on hieno esittely HTML5-videon soittimen rakentamiseen.

HTML5-videonsoittimen rakentaminen

10. VideoJS-kirjasto

VideoJS on luultavasti suosikkiratkaisuni HTML5-video-soittimille. Tarvitset vain itsensä isännöimän JavaScript- ja CSS-tyylitaulukon, joka on jossakin asiakirjassa. Sitten kirjoitat tavallisen HTML5-videokoodin, jossa on joitakin ylimääräisiä luokkia nylkemiseksi. Lisäsin alla olevan mallikoodin:

Jos käytät WordPress-blogia, voit myös kokeilla omaa WP-laajennusta. Se sisältää automaattisesti kirjaston js / css sivuille, joissa näytät HTML5-videota. Ja voit tehdä tämän minkä tahansa postin tai sivun muokkaajan sisällä käyttämällä lyhytkoodeja (katso tästä).

johtopäätös

Toivon, että tämä johdanto-opas voi sekoittaa kiinnostusta web-videon tulevaisuuteen. Kun lisää käyttäjiä kääntyy mobiililaitteille, on tärkeää, että HTML5-standardit hyväksytään tämäntyyppisille medioille. Verkko tulisi tehdä yksinkertaisemmaksi, jotta kehittäjät voivat tuottaa täysin tuettuja ratkaisuja paljon nopeammin. Haluaisimme kuulla ideoita ja ehdotuksia HTML5-videon tulevaisuudesta. Jos haluat jakaa kommenttisi, jätä kommentti alla olevaan keskustelualueeseen.