Videá vo formáte HTML5 10 vecí, ktoré je potrebné vedieť návrhárom

Revolúcia HTML5 je vzrušujúce webové dizajnérmi zo všetkých častí sveta. Nové špecifikácie podporujú desiatky prvkov a atribútov pre vytváranie sémantických webových stránok. Tieto nové funkcie zahŕňajú multimediálne značky pre zvukové a video formáty.

V uplynulých rokoch je multimediálny prehrávač vo formáte Flash viac ako dostatočný na streaming na webe a táto technológia je stále potrebná na podporu starších prehliadačov. Našťastie moderné štandardy pokročili a začlenenie videa HTML5 otvára dvere pre desiatky nových príležitostí.

V tejto príručke by som rád ponúkol úvod do videa HTML5 pre web. Bude trvať niekoľko tréningov na pochopenie natívneho hráča v prehliadači a všetkých jeho funkcií. A najlepší spôsob, ako sa zoznámiť, je prvé potápanie v hlave!

1. Typy médií

Keď pracujete s flash prehrávačom videa, je príliš bežné priradiť všetky formáty videa vo formáte .flv. Aj keď to funguje, väčšina flv súborov nemôže udržať kvalitu kdekoľvek v blízkosti pokročilejších formátov súborov / kodekov. Existujú tri dôležité typy videí, ktoré sú podporované formátmi HTML5: MP4, WebM a Ogg / Ogv. Typ súboru MPEG-4 je vo všeobecnosti kódovaný v systéme H.264, ktorý umožňuje prehrávanie v prehrávačoch Flash od tretích strán. To znamená, že nepotrebujete uchovávať kópiu videa vo formáte FLV. WebM a Ogg sú dva oveľa novšie typy súborov súvisiace s videom vo formáte HTML5. Ogg používa kódovanie Theory, ktoré je založené na štandardnom formáte audio súborov s otvoreným zdrojom. Tie môžu byť uložené s príponou .ogg alebo .ogv.

WebM je projekt vydaný spoločnosťou Google, ktorý si môžete prečítať viac na webovej stránke projektu WebM. Formát je už podporovaný operátormi Opera, Google Chrome, Firefoxom 4+ a najnovším programom Internet Explorer 9. Väčšina webových profesionálov ho stále nepozná, ale WebM je popredný formát mediálneho videa v budúcnosti webového videa.

2. Podpora prehliadača

Ktorý z týchto typov súborov potrebujete pre svoje webové stránky? V ideálnom prípade by všetky tri boli skvelé, pretože poskytujú plné podporné spektrum. Napriek tomu to nie je realistické a v skutočnosti môžete pokryť všetky základne len s dvoma. Tu je rozpis toho, čo funguje pre každý prehliadač:

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

Ak si spomeniete, skôr som spomenul, že väčšina flash video prehrávačov bude podporovať súbory MP4, ak sú zakódované v H.264. Ako taký, každý z týchto prehliadačov bude vkladať MP4 + Flash ako posledný rezort. To znamená, že musíte len vytvoriť dva rôznych formátov videa na podporu všetkých prehliadačov. MP4 pre Safari / IE9 a výber medzi WebM alebo Ogg pre ostatné.

Podľa môjho názoru veľmi odporúčam držať sa vo formáte WebM. Má niekoľko veľkých názvov za projektom (a to Google) a v komunite HTML5 získala veľa trakcie. Ogg / Ogv bude podporovaný, ale s najväčšou pravdepodobnosťou stratí popularitu na menších súborov WebM. Môžete si prečítať súvisiace dielo o budúcnosti videa na webe, ktorú napísal Sean Golliher.

3. Vkladanie jednoduchých videí vo formáte HTML5

Poďme sa pozrieť na syntax potrebný na vloženie vzorového kódu. Všetko, čo potrebujeme, je značka videa HTML5 s odkazom na každú adresu URL filmu.

Všimnite si riadenie a autoplay atribúty nemusia byť nastavené s ľubovoľnými hodnotami. Taktiež som zahrnula a plagát atribút, ktorý pred prehrávaním streamuje obrázok cez prehrávač videa. Toto je spoločný náhľad s mnohými webovými prehrávačmi.

Ponúkame formáty MP4 aj WebM interné pre prvok videa. Ak sa žiadna z nich nedá načítať, zobrazíme chybu pre používateľa na aktualizáciu svojho prehliadača.

4. Ponúknite Flash Fallback

Vyššie uvedený príklad je ideálny pre všetky webové prehliadače vyhovujúce štandardom. Musíme však tiež zvážiť, že svet nie je vždy na špici technológie. Potrebujeme podporovať používateľov na starších verziách Safari, Mozilla Firefox a najmä Internet Explorer.

Najlepším spôsobom, ako to dosiahnuť, je prostredníctvom záložného záložníka Flash. Tie môžu byť pridané pomocou vložiť alebo objekt značky odkazovať na súbor .swf tretej strany. JW Player a Flowplayer sú dve voľné open source riešenia, ktoré môžete zvážiť. Ale tiež vyskúšať prémiové video prehrávače na ActiveDen, ktoré môžu ísť tak lacné ako $ 15 - $ 20.

Teraz poďme kód vylepšiť, aby zahŕňal núdzový prehrávač Flash na podporu takmer každého existujúceho prehliadača.

5. Podpora mobilných zariadení

Táto téma je stále veľmi diskutovaná, pretože mobilný priemysel je tak mladý. Apple prišiel s podporou MP4 na zariadeniach Mac a iOS. To znamená, že môžete natočiť video súbory vo formáte .mp4 na zariadení iPad, iPhone alebo iPod Touch v štandardnom používateľskom rozhraní. To pokrýva veľa podielu na trhu.

V poslednej dobe sa zariadenia s Androidom ťažko dostali na túto úroveň podpory. Spoločnosť Google však nakoniec prijala streamovanie webových stránok .mp4, ktoré teraz využívajú takmer všetkých mobilných používateľov. A keďže Flash nie je voľba, MP4 je najlepšie dostupné riešenie. To je dôvod, prečo chcete najskôr vložiť kód .mp4, aby zariadenia iOS okamžite rozpoznali súbor.

6. Safari User Agent

Jedna chyba, ktorá musí byť spomenutá, je jedna medzi existujúcimi prehrávačmi Flash a natívnym streamovaním .mp4 HTML5 na Safari. Pretože prehliadač môže podporovať oba súbory, môžete mať problém s získavaním video streamu HTML5 namiesto Flash. Avšak vďaka tomuto skvelému príspevku na blogu na TUAW je ľahké zmeniť používateľského agenta prehliadania.

Tým sa vaša webová stránka bude musieť rozpoznať, že prehliadač funguje na inom zariadení. S najväčšou pravdepodobnosťou by ste si zvolili iPad, ktorý nepodporuje prehrávanie Flash. Toto je jediný závažný problém, ktorý sa môže vyskytnúť pri testovaní metód natívneho a flash prehrávania MP4.

7. Spravujte ovládacie prvky prehrávača

Verte tomu alebo nie, existujú aj metódy, ktoré môžete použiť na ovládanie ovládacích prvkov prehrávača videa HTML5. To všetko môžete urobiť v jazyku JavaScript tým, že vytiahnete zo súboru otvorených metód. Je tu príliš veľa na to, aby ste tu mohli vymenovať, ale skúste si prečítať dokumenty dokumentov W3C médií pre viac podrobností.

Ak chcete získať všeobecnú predstavu, Opera dev blog posta nejaké krátke tutoriály, ktoré sú skvelé pre nováčikov. Dokonca aj vtedy, keď ste nikdy predtým nezobrali JavaScript alebo jQuery, je stále jednoduché naraziť na zem bežiacu s týmto. Môžete volať na konkrétne atribúty video média, ako napríklad stlmený alebo aktuálny čas. Potom môžete vykonať akcie (stmavenie pozadia, grafické reklamy) na základe týchto kritérií manipuláciou DOM v jQuery.

Ten istý vývojár v článku Opera poskytuje funkčné demo svojho skriptovaného prehrávača videa. Príležitosť prispôsobiť svoje vlastné ovládacie prvky UI je vynikajúca. Stačí ukázať, ako sa stáva silné video HTML5.

8. Konverzia videa

Toto je ďalšia veľká otázka, ktorá pravdepodobne zamieňa menej technicky zdatných jednotlivcov. Stačí, aby ste dostali svoju webovú stránku a streamovali a teraz sa musíte zaoberať konverziou videí? No, v skutočnosti to nie je tak ťažké.

Ak chcete riešiť MP4, ktorá je vašou najväčšou prioritou, môžete použiť HandBrake, čo je bezplatné riešenie s otvoreným zdrojovým kódom, ktoré funguje na všetkých troch hlavných operačných systémoch. Bude podporovať H.264 spolu s niekoľkými ďalšími kodeky, čo z nej robí najlepšiu voľbu pre užívateľov freebie. Ak máte peniaze na vyplatenie, musím odporučiť Xilisoft konvertor, ktorý je na Mac App Store iba za 40 dolárov na celoživotnú licenciu.

Vyzerá to, že trasa WebM uľahčuje život. Miro Video Converter je bezplatný nástroj pre Windows a OS X, ktorý produkuje skvelé webové súbory. To môže tiež robiť Ogg Theora kódovanie, ktoré vychádza s veľmi skvelou kvalitou rovnako.

9. Vytvorenie webového prehrávača

Formáty videa s technickými parametrami HTML5 sú vývojárom stále nové. Existujú otvorené protokoly, ktoré len čakajú na hranie, aby umožnili vlastné ovládacie prvky, posuvníky, ikony prehrávania / pauzy atď. Ak sa cítite odvážne, prečítajte si tento návod na vytvorenie vlastného prehrávača HTML5 (publikovaný na splashnológii).

Kód je pre nových používateľov trochu intenzívny, pretože vyžaduje pokročilé zacielenie na CSS a trochu formálneho jQuery. Existujú aj iné rámce, na ktorých môžete stavať, a ktoré už ponúkajú prispôsobený dizajn pre hráčov. Podobne táto prezentácia slideshare je skvelým úvodom pri vytváraní prehrávača videa HTML5.

10. Knižnica VideoJS

VideoJS je pravdepodobne moje obľúbené riešenie pre prehrávače videa HTML5. Všetko, čo potrebujete, je ich vlastný hostiteľský šablón so šablónami JavaScript a CSS, ktoré sú obsiahnuté niekde vo vašom dokumente. Potom napíšete štandardný kód videa HTML5 s niektorými dodatočnými triedami na stiahnutie. Pridal som vzorový kód nižšie:

Ak sa stanete spustením blogu WordPress, môžete si vyskúšať aj vlastný doplnok WP. Bude automaticky obsahovať knižnicu js / css na stránkach, kde sa zobrazuje video HTML5. A môžete to urobiť z ľubovoľného editora príspevkov alebo stránok pomocou krátkych kódov (pozri tu).

záver

Dúfam, že táto úvodná príručka môže vzbudiť záujem o budúcnosť webového videa. S viacerými používateľmi, ktorí sa obracajú na mobilné zariadenia, je dôležité, aby boli pre tieto typy médií prijaté štandardy HTML5. Web by mal byť jednoduchší, aby vývojári mohli produkovať plne podporované riešenia oveľa rýchlejšie. Radi by sme počuli svoje nápady a návrhy na budúcnosť videa HTML5. Ak by ste chceli zdieľať, neváhajte a ponechajte komentár v diskusnej oblasti nižšie.