Značka videa HTML5 uľahčuje pridanie videa na vaše webové stránky. Ale keď sa zdá, že je ľahké na povrchu, je veľa vecí, ktoré musíte urobiť, aby ste svoje video spustili. Tento návod vás prevedie postupmi na vytvorenie stránky v jazyku HTML5, v ktorom sa budú zobrazovať videá vo všetkých moderných prehliadačoch.
- Hosting vlastného videa vo formáte HTML5 vs. používanie služby YouTube
- Stručný prehľad podpory videa na webe
- Vytvorte a upravte svoje video
- Previesť video na Ogg pre Firefox
- Previesť video na MP4 pre Safari
- Previesť video do formátu FLV pre program Internet Explorer
- Pridajte prvok videa na svoju webovú stránku
- Pridajte JavaScript a prehrávač Flash Player, aby ste Internet Explorer mohli pracovať
- Testujte toľko prehliadačov, ako môžete
Hosting vašej vlastnej HTML 5 Video vs Používanie služby YouTube
YouTube je skvelý web. Umožňuje rýchlo vkladať video do webových stránok rýchlo a s niektorými malými výnimkami je pri realizácii týchto videí pomerne bezproblémová. Ak na YouTube uverejníte video, môžete si byť istí, že ho budete môcť pozrieť niekto.
Ale pomocou YouTube na vloženie vašich videí má nejaké nevýhody
Väčšina problémov so službou YouTube je na strane spotrebiteľa, a nie na strane navrhovateľa, napríklad:
- Pomalé vyhľadávanie a indexovanie
- Výpadky servera
- Obsah je (zdanlivo) odstránený ľubovoľne
- Príliš veľa zlého obsahu
Existujú však aj niektoré dôvody, prečo služba YouTube je pre vývojárov obsahu tiež zlá, vrátane:
- 10 minútová maximálna dĺžka videí (pre bezplatné účty)
- Nízky výkon pri nahrávaní
- Služba YouTube získava neobmedzené práva na používanie vášho videa
- Každý používateľ služby YouTube získa neobmedzené práva na používanie vášho videa
Video HTML5 prináša niekoľko výhod na YouTube
Použitie kódu HTML5 pre video vám umožní kontrolovať každý aspekt vášho videa, od koho ho môžete zobraziť, ako dlho to je, aký obsah obsahuje, kde je hosťovaný a ako vykonáva server. A video vo formáte HTML5 vám dáva príležitosť kódovať vaše video v toľkých formátoch, ako je potrebné, aby ste sa uistili, že maximálny počet ľudí ho môže zobraziť. Vaši zákazníci nepotrebujú plugin alebo čakať, kým YouTube uvoľní novšiu verziu.
Video HTML5 samozrejme ponúka niektoré nevýhody
Tie obsahujú:
- Musíte zakódovať svoje video aspoň v troch rôznych kodekoch
- Aby ste zabezpečili, že prehliadače, ktoré nepodporujú HTML5, budete musieť zahrnúť nejaký jazyk JavaScript
- Váš server musí byť schopný zvládnuť požiadavky na šírku pásma pri hosťovaní videí
Pokračujte v čítaní nižšie
02 z 10Stručný prehľad podpory videa na webe
Pridanie videa na webové stránky je už dávno náročný proces. Existovalo toľko vecí, ktoré by mohli pokaziť:
- Najskôr použijete značku na vloženie videa do vašej stránky. ALE táto značka je zastaraná v prospech inej značky. A niektoré prehliadače ju nikdy nepodporili.
- Takže sa prepnete na ale staršie prehliadače ju nepodporujú a novšie prehliadače sú skryté v jeho podpore.
- Potom si myslíte, Flash! Kódujte svoje video ako súbor FLV. Flash však nie je podporovaný na mnohých mobilných zariadeniach a veľa ľudí nenávidí Flash bez ohľadu na to, ako sa používa (25% respondentov v mojej ankete sa pýtalo, ako si myslíte o Flash uviedol, že nemôžu v žiadnom prípade odolávať Flash).
- Takže sa rozhodnete nahrať svoje video na webovú stránku na vkladanie videa, ako je YouTube, ale potom máte problémy s YouTube, o ktorých sme diskutovali.
- Nakoniec sa rozhodnete prejsť HTML5, ale program Internet Explorer ho nepodporuje (nie až do programu Internet Explorer 9). A aj keby ste to urobili, existujú dva štandardy pre video kodek, ktoré sú podporované a len jeden prehliadač, ktorý môže používať oboje. Podpora prehliadačov pre video kodeky a kontajnery
Takže čo by ste mali robiť? Poskytovanie videa už nie je voľbou pre väčšinu lokalít, pretože video je čoraz dôležitejšie. A mnoho stránok úspešne prešlo na video.
Nasledujúce stránky tohto článku vás informujú o tom, ako pridať video na vaše webové stránky, ktoré fungujú v aplikáciách Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 a 4, iPhone a Android, Flash a Internet Explorer 7 a 8. máte aj kľúče, ktoré potrebujete na pridanie podpory pre ostatné staršie prehliadače, ak je to potrebné.
Pokračujte v čítaní nižšie
03 z 10Vytvorte a upravte svoje video
Prvá vec, ktorú potrebujete, keď idete umiestniť video na webovú stránku, je skutočné video. Môžete buď natáčať nepretržite a následne upravovať, aby ste vytvorili funkciu, alebo môžete skriptovať a naplánovať ju v predstihu. Či tak či tak funguje dobre, je to len to, čo vám vyhovuje. Ak neviete, aký typ videa by ste mali urobiť, pozrite si tieto nápady z príručky Videopríslušenstvo:
- Projekty rodinných videí
- Marketingové a propagačné videá
- Video virtuálne prehliadky
- Ako videá
- Svadobné videá
Naučte sa nahrávať videá vysokej kvality
Uistite sa, že viete, ako nahrávať v interiéri a vonku, ako aj ako nahrávať zvuk. Osvetlenie je tiež veľmi dôležité - zábery, ktoré sú príliš jasné, poškodzujú oči a príliš tmavé vyzerajú bláznivé a neprofesionálne. Dokonca aj keď máte v pláne mať na svojom webe 30-sekundové video, vyššia kvalita je to lepšie, čo sa bude zobrazovať na vašich webových stránkach.
Pamätajte tiež, že autorské práva sa vzťahujú na akékoľvek zvuky alebo hudbu (rovnako ako stopy skladieb), ktoré by ste mohli použiť vo vašom videu. Ak nemáte prístup k priateľovi, ktorý vám môže písať a prehrať skladbu, potrebujete nájsť hudbu bez licenčných poplatkov, ktorá sa bude hrať na pozadí. Existujú aj miesta, kde môžete uložiť zábery, ktoré chcete pridať do svojich videí.
Úprava vášho videa
Nezáleží na tom, aký editačný softvér používate, iba ak ste s ním oboznámení a môžete ho efektívne používať. Gretchen, Desktop Video Guide, obsahuje niekoľko odborných tipov na úpravu videa, ktoré vám pomôžu upraviť vaše videá tak, aby vyzerali skvele.
Uložte svoje video do MOV alebo AVI (alebo MPG, CD, DV)
Na zvyšok tohto tutoriálu budeme predpokladať, že máte svoje video uložené v nejakom type vysokokvalitného (nekomprimovaného) formátu ako AVI alebo MOV. Zatiaľ čo tieto súbory môžete používať tak, ako sú, narazíte na všetky problémy s videom, ktoré sme už diskutovali. Nasledujúce stránky vysvetľujú, ako previesť súbor do troch typov, takže ho môžete zobraziť najväčším počtom prehliadačov.
04 z 10Previesť video na Ogg pre Firefox
Prvý formát, ktorý budeme konvertovať, je Ogg (niekedy nazývaná Ogg-Theora). Tento formát je ten, na ktorom možno všetci zobraziť prehliadače Firefox 3.5, Opera 10.5 a Chrome 3.
Bohužiaľ, zatiaľ čo Ogg má podporu prehliadačov, mnohé z dobre známych video programov, ktoré si môžete kúpiť (Adobe Media Encoder, QuickTime atď.), Neponúkajú konverziu Ogg. Takže jediný spôsob, ako previesť video na Ogg, je nájsť konverzný program na webe.
Možnosti konverzie
Existuje online nástroj s názvom Media-Convert, ktorý požaduje konverziu rôznych formátov videa (a zvuku) do iných formátov videa (a zvuku). Keď sme to skúšali s mojím 3-sekundovým testovacím videom, nemohli sme ho dostať do práce na počítači Mac. Ale môžete mať viac šťastia. Táto stránka má výhodu, že je zadarmo.
Niektoré ďalšie nástroje, ktoré sme našli, zahŕňajú:
- Miro Video Converter (Windows Macintosh) - Tento program má výhodu prevodu na oba Ogg a MP4 (H.264) a je to open source.
- Koyote Video Converter (Windows)
- Free Video Converter Myslíme si, že to má ako Windows aj Macintosh verziu, ale bolo ťažké povedať z ich stránky
- Jednoduchý Theora Encoder (Macintosh) - to je ten, ktorý máme tendenciu používať.
Po uložení videa vo formáte Ogg ho uložte na miesto na vašom webe a prejdite na ďalšiu stránku a skonvertujte ho do iných formátov pre iné prehliadače.
Pokračujte v čítaní nižšie
05 z 10Previesť video na MP4 pre Safari
Ďalší formát, do ktorého by ste mali konvertovať video, je MP4 (video vo formáte H.264), takže sa dá prehrať na stránkach Safari 3 a 4 a iPhone a Android. Plus, videá vo formáte H.264 sa dajú ľahko premeniť na súbory FLV, ktoré sa dajú sledovať vo formáte Flash.
Tento formát je ľahšie dostupný v komerčných produktoch a pravdepodobne už máte program, ktorý bude konvertovať na MP4, ak máte video editor. Ak máte program Adobe Premiere, môžete použiť program Adobe Video Encoder alebo máte QuickTime Pro, ktorý bude fungovať rovnako. Mnohé z konvertorov, o ktorých sme diskutovali na predchádzajúcej stránke, tiež skonvertujú videá na MP4.
- MediaConvert - Online AWS nástroj.
- Miro Video Converter (Windows Macintosh) - Tento program má výhodu prevodu na oba Ogg a MP4 (H.264) a je to open source.
- SUPER (Windows) - prevedie mnoho rôznych typov súborov na MP4 a FLV
- Free Video Converter Myslíme si, že to má ako Windows aj Macintosh verziu, ale bolo ťažké povedať z ich stránky.
Uložte svoj súbor MP4 na svoju webovú stránku a potom ju budete musieť previesť na aplikáciu Flash pre Internet Explorer.
06 z 10Previesť video do formátu FLV pre program Internet Explorer
Najjednoduchší spôsob, ako previesť videá do FLV, je použitie samotného programu Flash. Takto môžem konvertovať svoje videá na Flash. Ak však nemáte Flash, tu sú dva obľúbené nástroje na konverziu súborov na FLV:
- SUPER (Windows) - prevedie mnoho rôznych typov súborov na MP4 a FLV
- ffmpegX (Macintosh) - prevedie mnoho rôznych typov súborov na Mp4 a FLV.
Uložte súbor FLV na svoju webovú stránku a na ďalšej stránke ukážete, ako napísať HTML, aby ste mohli prehrávať vaše videá.
Pokračujte v čítaní nižšie
07 z 10Pridajte prvok videa na svoju webovú stránku
Je veľmi jednoduché použiť HTML 5 na pridanie videa na webové stránky. Väčšina moderných prehliadačov podporuje video HTML 5, hoci to všetko nepodporuje rovnakým spôsobom. Ale to znamená, že keď uložíte video ako formáty Ogg aj MP4, budete môcť napísať len štyri alebo päť riadkov kódu HTML, aby sa zobrazil vo väčšine moderných prehliadačov (okrem programu Internet Explorer 8). Tu je postup:
Napíšte značku HTML 5 doctype, aby prehliadače vedeli očakávať HTML 5:
- Vytvorte svoju webovú stránku tak, ako by ste ju normálne vytvorili:
- V tele umiestnite
- Rozhodnite sa, aké atribúty chcete mať vaše video: Odporúčame používať ovládacie prvky a predinštalovať. Ak vaše video nemá dobrú prvú scénu, použite možnosť plagátu.
- automatické prehrávanie - začať ihneď po stiahnutí
- ovládacie prvky - umožňujú čitateľom ovládať video (pauza, pretáčanie dozadu, rýchle posunutie dopredu)
- slučka - spustite video od začiatku, keď skončí
- predbežne načítať - predbežne stiahnuť video tak, aby bolo pripravené rýchlejšie, keď zákazník naň klikne
- plagát - definujte obrázok, ktorý chcete použiť, keď je video zastavené
- Potom pridajte zdrojové súbory pre dve verzie videa (MP4 a OGG) vo vnútri
- Otvorte stránku v prehliadači Chrome 1, Firefoxu 3.5, Opera 10 a / alebo Safari 4 a uistite sa, že sa zobrazuje správne. Mali by ste to otestovať aspoň v prehliadačoch Firefox 3.5 a Safari 4 - pretože každý používa iný kodek.
To je všetko. Akonáhle budete mať tento kód na svojom mieste, budete mať video, ktoré funguje v prehliadačoch Firefox 3.5, Safari 4, Opera 10 a Chrome 1. Čo však s programom Internet Explorer?
Internet Explorer nemá rád HTML 5 alebo
V ďalšej časti sa budeme rozprávať o tom, čo môžete urobiť, aby ste získali IE 8, aby ste mohli hrať pekne s vašimi video značkami HTML 5 a zobraziť video. Musíte použiť Flash.Dobrou správou je, že od IE 9 sa očakáva, že bude podporovať HTML 5 a videozáznam.
08 z 10Pridajte JavaScript a prehrávač Flash Player, aby ste Internet Explorer mohli pracovať
Možno ste si všimli, že na HTML predchádzajúcej stránky neexistuje zdrojový riadok pre súbor FLV. A ak ste otestovali túto stránku v programe Internet Explorer, nefunguje to. Je to preto, že program Internet Explorer nerozpozná formát HTML 5 a nemôže natívne prehrávať videá OGG ani MP4. Ak chcete, aby aplikácie Internet Explorer 7 a 8 fungovali, musíte ju prehrávať ako Flash. Existuje však viac krokov na to, aby ste sa dostali do práce, ako len pridanie súboru FLV.
Krok 1: Získajte prehrávač Flash Video pre vaše webové stránky
Odporúčame FlowPlayerovi, pretože je to prehrávač Flash s otvoreným zdrojom, ktorý si môžete nainštalovať na svojom webovom serveri a používať ho kedykoľvek budete musieť prehrať Flash video. Bezplatná verzia aplikácie FlowPlayer vkladá reklamy do vašich videí, ale môžete ich zakúpiť aj v prípade, že ich potrebujete.
Postupujte podľa pokynov na lokalite FlowPlayer a nainštalujte aplikáciu FlowPlayer na svoj web. V skratke, na vašom webe budete inštalovať 2 súbory SWF a súbor JavaScript. V spodnej časti kódu HTML (pred tag) pridáte riadok:
Program Internet Explorer však stále nehraje video, musíte ho naučiť rozpoznať značky HTML 5.
Krok 2: Presvedčte Internet Explorer na čítanie značiek HTML 5
V kóde Google s názvom "HTML Shiv" je k dispozícii šikovný skript, ktorý pomôže IE rozpoznať prvky HTML 5. Takže v
dokumentu HTML, ktorý chcete odkazovať. Najlepšie je priložiť do IE podmienených komentárov, aby ostatné prehliadače neboli zmätené:
Dobre, teraz IE rozpozná
