HTML5 vaizdo įrašai 10 dalykų, kuriuos reikia žinoti

„HTML5“ revoliucija yra įdomūs interneto dizaineriai iš visų pasaulio sričių. Naujos specifikacijos palaiko daugybę elementų ir atributų, skirtų semantinių svetainių kūrimui. Šios naujos funkcijos apima garso ir vaizdo formatų daugialypės terpės žymes.

Pastaraisiais metais „Flash“ pagrįstas medijos leistuvas daugiau nei pakankamas transliavimui internete ir ši technologija vis dar reikalingas palikimo naršyklėms palaikyti. Tačiau, laimei, šiuolaikiniai standartai buvo pažengę ir HTML5 vaizdo įrašų įtraukimas atveria duris dešimčiai naujų galimybių.

Šiame vadove norėčiau pasiūlyti HTML5 vaizdo įrašą internete. Tai reikės tam tikros praktikos, kad suprastumėte vietinį naršyklės grotuvą ir visą jo funkcionalumą. Ir geriausias būdas susipažinti yra nardymas galvoje!

1. Žiniasklaidos tipai

Dirbdami su „Flash“ vaizdo grotuvu, pernelyg dažnai priskiriami visi vaizdo formatai .flv. Nors tai veikia, dauguma FLV rinkmenų negali išsaugoti kokybės visur šalia pažangesnių failų formatų / kodekų. Yra trys svarbūs vaizdo įrašų tipai, kuriuos palaiko HTML5: MP4, WebM ir Ogg / Ogv. MPEG-4 failo tipas paprastai koduojamas H.264, kuris leidžia atkurti trečiosios šalies „Flash“ žaidėjams. Tai reiškia, kad nereikia išlaikyti .flv vaizdo kopijos, kad palaikytumėte atsarginį metodą! WebM ir Ogg yra du naujesni failų tipai, susiję su HTML5 vaizdo įrašu. „Ogg“ naudoja „Theora“ kodavimą, kuris yra pagrįstas atviro kodo standartiniu garso failo formatu. Tai galima išsaugoti .ogg arba .ogv plėtiniu.

„WebM“ yra „Google“ išleistas projektas, kuriame galite daugiau sužinoti apie „WebM“ projekto svetainę. Formatą jau palaiko „Opera“, „Google Chrome“, „Firefox 4+“, o paskutinį kartą - „Internet Explorer 9“. Daugelis žiniatinklio profesionalų vis dar nežinojo, tačiau „WebM“ yra pagrindinis vaizdo įrašų formatas ateityje žiniatinklio vaizdo įrašams.

2. Naršyklės palaikymas

Taigi, kuris iš šių failų tipų jums reikalingas jūsų svetainėje? Geriausia, kad visi 3 būtų puikūs, nes jie suteikia visą palaikymo spektrą. Tačiau tai nėra realu, ir iš tikrųjų jūs galite padengti visas bazes tik dviem. Čia pateikiamas kiekvienos naršyklės darbų suskirstymas:

• „Mozilla Firefox“ - „WebM“, „Ogg“
• „Google Chrome“ - „WebM“, „Ogg“
• Opera - WebM, Ogg
• „Safari“ - MP4
• Internet Explorer 9 - MP4
• „Internet Explorer 6-8“ - ne HTML5, tik „Flash“!

Jei prisiminsite, anksčiau minėjau, kad dauguma „flash“ vaizdo grotuvų palaikys MP4 failus tol, kol jie bus užkoduoti H.264. Taigi kiekviena iš šių naršyklių bus įterpta MP4 + Flash kaip galutinė priemonė. Tai reiškia, kad reikia tik sukurti du skirtingus vaizdo formatus, skirtus palaikyti visas naršykles. MP4, skirtas „Safari / IE9“, ir pasirinkimas tarp „WebM“ arba „Ogg“ likusiems.

Mano nuomone, labai rekomenduoju laikytis WebM formato. Jame yra keletas didelių pavadinimų už projekto (ty „Google“), ir HTML5 bendruomenėje jis įgijo daug traukos. „Ogg“ / „Ogv“ bus palaikoma, tačiau greičiausiai neteks populiarumo dėl mažesnių „WebM“ failų. Su Sean Golliher parašytu vaizdo įrašo ateityje internete galite skaityti susijusį kūrinį.

3. Įtraukti paprastus HTML5 vaizdo įrašus

Pažvelkime į sintaksę, reikalingą tam, kad įterpti tam tikrą pavyzdinį kodą. Viskas, ko mums reikia, yra HTML5 vaizdo žyma, leidžianti nurodyti kiekvieną filmo URL.

Atkreipkite dėmesį į kontrolės priemones ir automatinis paleidimas atributų nereikia nustatyti jokiomis reikšmėmis. Aš taip pat įtraukiau a plakatas atributas, kuris prieš srautinį transliavimą perkelia vaizdą per vaizdo grotuvą. Tai yra bendras peržiūros su daugeliu interneto žaidėjų.

Mes siūlome tiek MP4, tiek WebM formatus, esančius vaizdo elemento viduje. Jei nė vienas iš jų negali būti įkeltas, rodome klaidą, kad vartotojas galėtų atnaujinti savo naršyklę.

4. „Flash Fallback“ pasiūlymas

Anksčiau pateiktas pavyzdys puikiai tinka visiems standartams tinkančioms interneto naršyklėms. Tačiau mes taip pat turime atsižvelgti į tai, kad pasaulis ne visada yra pažangiausias technologija. Turime palaikyti naudotojus senesnėse „Safari“, „Mozilla Firefox“ ir ypač „Internet Explorer“ versijose.

Geriausias būdas tai pasiekti yra „Flash“ grįžtamasis grotuvas. Tai gali būti pridėta naudojant įdėkite arba objektą žymos, skirtos nuorodai į trečiosios šalies .swf failą. JW Player ir Flowplayer yra du nemokami atviro kodo sprendimai, kuriuos galite apsvarstyti. Tačiau taip pat patikrinkite „PremiumDen“ vaizdo įrašų grotuvus, kurie gali būti tokie pigūs kaip $ 15 - $ 20.

Dabar suprasime aukščiau esantį kodą, kad įtrauktume „Flash“ grotuvą, kad galėtume palaikyti beveik kiekvieną esamą naršyklę.

5. Mobiliojo įrenginio palaikymas

Ši tema vis dar labai diskutuojama, nes judrioji pramonė yra tokia jauna. Apple atėjo su MP4 palaikymu Mac ir iOS įrenginiuose. Tai reiškia, kad galite natūraliai transliuoti .mp4 vaizdo failus į savo „iPad“, „iPhone“ ar „iPod Touch“ standartinėje vaizdo sąsajoje. Tai apima daug rinkos dalies.

Neseniai „Android“ įrenginiai sunkiai pasiekė tą patį paramos lygį. Tačiau „Google“ pagaliau priėmė .mp4 žiniatinklio transliaciją, kuri dabar naudojasi beveik visais mobiliojo ryšio naudotojais. Ir kadangi „Flash“ nėra parinktis, MP4 yra geriausias sprendimas. Todėl pirmiausia norite įterpti .mp4 kodą, kad „iOS“ įrenginiai galėtų nedelsdami atpažinti failą.

6. „Safari“ naudotojo agentas

Viena klaida, kuri turi būti paminėta, yra „Flash“ žaidėjų ir gimtojo HTML5 .mp4 srautinio transliavimo „Safari“. Kadangi naršyklė gali palaikyti abu failus, vietoj „Flash“ gali būti sunku gauti HTML5 vaizdo įrašo srautą. Tačiau dėl šio puikaus „TUAW“ dienoraščio įrašo lengva keisti naršymo naudotojo agentą.

Tai privers jūsų tinklalapį atpažinti naršyklę kaip veikia kitame įrenginyje. Labiausiai tikėtina, kad pasirinksite „iPad“, kuri nepalaiko jokio „Flash“ atkūrimo. Tai yra vienintelė svarbi problema, kurią galite paleisti bandant MP4 gimtoji ir „flash“ atkūrimo metodus.

7. Valdykite grotuvo valdiklius

Patikėkite ar ne, yra būdų, kuriais galite manipuliuoti HTML5 vaizdo grotuvo valdikliais. Visa tai gali būti padaryta „JavaScript“ ištraukiant iš atvirų metodų rinkinio. Čia yra per daug, kad galėtumėte išvardyti čia, bet pabandykite nugriauti W3C medijos elementą, kad gautumėte daugiau informacijos.

Norint suteikti jums bendrą idėją, „Opera dev“ dienoraštis paskelbė keletą trumpų vadovėlių, kurie puikiai tinka naujokams. Net jei anksčiau niekada neprisidėjote „JavaScript“ ar „jQuery“, vis dar paprasta pasiekti žemę, kurioje veikia šis. Galite skambinti konkrečiais vaizdo laikmenų atributais, pvz., nutildytas arba Dabartinis laikas. Tada galite atlikti veiksmus (apšviesti foną, rodyti skelbimus) pagal šiuos kriterijus, manipuliuodami DOM jQuery.

Tas pats „Opera“ straipsnio kūrėjas pateikia savo scenarijų vaizdo grotuvo darbo demonstraciją. Galimybė pritaikyti savo UI kontrolę yra neįvykdyti. Jis tiesiog parodo, kaip galingas HTML5 vaizdo įrašas.

8. Vaizdo formato konvertavimas

Tai dar viena didelė problema, kuri greičiausiai supainiotų mažiau techniką patyrusius asmenis. Jūs tiesiog norite gauti savo svetainę ir transliuoti, o dabar turite susidoroti su vaizdo įrašų konvertavimu? Na tai tikrai ne taip sunku.

Norėdami kovoti su MP4, kuris yra jūsų didžiausias prioritetas, galite naudoti „HandBrake“, kuris yra nemokamas atviro kodo sprendimas, kuris veikia visose 3 pagrindinėse OS. Jis rems H.264 kartu su keliais kitais kodekais, todėl tai yra geriausias variantas nemokamų žaidimų vartotojams. Jei turite pinigų, kad uždirbtumėte, turiu rekomenduoti „Xilisoft“ konverterį, kuris yra „Mac App Store“ tik 40 dolerių gyvavimo licencijai.

Atrodo, kad WebM maršrutas palengvina gyvenimą. „Miro Video Converter“ yra nemokama priemonė „Windows“ ir „OS X“, kuri gamina puikios kokybės „WebM“ failus. Jis taip pat gali daryti „Ogg Theora“ kodavimą, kuris taip pat pasireiškia gana puikia kokybe.

9. Žiniatinklio leistuvo kūrimas

Vaizdo formatai su HTML5 specifikacijomis kūrėjams vis dar yra nauji. Yra atviri protokolai, tik laukiantys, kol bus leista atlikti pasirinktinius valdiklius, slankiklius, leisti / pristabdyti piktogramas ir tt Jei jaučiatės drąsūs, patikrinkite šią pamoką apie tai, kaip sukurti savo HTML5 grotuvą (paskelbtas „Splashnology“).

Kodas yra šiek tiek intensyvus naujokams, nes jam reikalingas pažangus CSS taikymas ir šiek tiek formalios jQuery. Yra ir kitų sistemų, kuriomis galite remtis, o tai jau siūlo individualų žaidėjo dizainą. Panašiai šis skaidrių demonstravimo pristatymas yra puikus įvadas į HTML5 vaizdo grotuvo kūrimą.

HTML5 vaizdo grotuvo kūrimas

10. VideoJS biblioteka

„VideoJS“ tikriausiai yra mano mėgstamiausias HTML5 vaizdo grotuvų sprendimas. Viskas ko jums reikia, yra jų savarankiškai veikianti „JavaScript“ ir „CSS“ stilių lentelė, įtraukta į jūsų dokumentą. Tada parašykite standartinį HTML5 vaizdo kodą su kai kuriomis papildomomis odos nulupimo klasėmis. Toliau pridėjau jų pavyzdinį kodą:

Jei atsitiktų paleisti „WordPress“ tinklaraštį, taip pat galite išbandyti savo pasirinktinį „WP“ papildinį. Jis automatiškai įtrauks biblioteką js / css puslapiuose, kuriuose rodomas HTML5 vaizdo įrašas. Tai galite padaryti iš bet kurio pranešimo ar puslapio redaktoriaus naudojant trumpuosius kodus (žr. Čia).

Išvada

Tikiuosi, kad šis įvadinis vadovas gali maišyti jūsų susidomėjimą interneto vaizdo ateitimi. Kai daugiau vartotojų kreipiasi į mobilųjį telefoną, svarbu, kad HTML5 standartai būtų priimti šių tipų laikmenoms. Žiniatinklis turėtų būti supaprastintas, kad kūrėjai galėtų greičiau sukurti visiškai palaikomus sprendimus. Mes norėtume išgirsti jūsų idėjas ir pasiūlymus dėl HTML5 vaizdo ateities. Jei norite pasidalinti, palikite komentarą toliau pateikiamoje diskusijų srityje.