Značka videa HTML5 usnadňuje přidávání videa na vaše webové stránky. Ale když se zdá, že je to snadné na povrchu, je spousta věcí, které musíte udělat, aby vaše video fungovalo. Tento tutoriál vás provede kroky k vytvoření stránky ve formátu HTML5, ve kterém budou spouštěny videa ve všech moderních prohlížečích.
- Hosting vašeho vlastního videa HTML5 versus YouTube
- Rychlý přehled podpory videa na webu
- Vytvořte a upravte své video
- Převést video na Ogg pro Firefox
- Převést video do formátu MP4 pro Safari
- Převést video do FLV pro aplikaci Internet Explorer
- Přidejte video element na svou webovou stránku
- Přidejte JavaScript a přehrávač Flash Player, abyste mohli aplikaci Internet Explorer pracovat
- Testujte v co nejvíce prohlížečích
Hosting vašeho vlastního HTML 5 videa vs použití YouTube
YouTube je skvělý web. Umožňuje rychle vkládat video do webových stránek rychle a s několika drobnými výjimkami je docela snadné provádět videa. Pokud zaúčtujete video na YouTube, můžete být docela přesvědčeni, že ho někdo bude moci sledovat.
Použití YouTube pro vkládání vašich videí má některé nevýhody
Většina problémů se službou YouTube spočívá spíše na straně spotřebitelů než na straně designérů, například:
- Pomalé vyhledávání a indexování
- Výpadek serverů
- Obsah je (zdánlivě) odstraněn libovolně
- Příliš mnoho špatného obsahu
Existují však některé důvody, proč YouTube je pro vývojáře obsahu také špatný, včetně:
- 10 minut maximální délka videí (pro bezplatné účty)
- Špatný výkon při nahrávání
- YouTube získává neomezená práva na používání vašeho videa
- Každý uživatel YouTube získá neomezená práva na používání vašeho videa
Video HTML5 přináší některé výhody na YouTube
Pomocí HTML5 pro video budete moci řídit každý aspekt vašeho videa, od koho ho můžete vidět, jak dlouho to trvá, jaký obsah obsahuje, kde je hostován a jak server provádí. Video ve formátu HTML5 vám dává příležitost kódovat vaše video v mnoha formátech, kolik potřebujete, abyste se ujistili, že ho může zobrazit maximální počet lidí. Vaši zákazníci nepotřebují plugin ani počkat, než YouTube vydá novější verzi.
Video HTML5 samozřejmě nabízí některé nevýhody
Tyto zahrnují:
- Musíte zakódovat své video alespoň třemi různými kodeky
- Musíte zahrnout nějaký JavaScript, abyste zajistili, že prohlížeče, které nepodporují HTML5, budou fungovat
- Váš server musí být schopen zvládnout požadavky na šířku pásma hostování videa
Pokračujte ve čtení níže
02 z 10Rychlý přehled podpory videa na webu
Přidávání videa na webové stránky je již dlouho obtížné. Bylo tolik věcí, které by se mohly pokazit:
- Nejprve použijete tag pro vložení videa do vaší stránky. ALE tato značka je zastaralá ve prospěch jiné značky. A některé prohlížeče to nikdy nepodporovaly.
- Takže přepnete na tagy, ale starší prohlížeče ji nepodporují a novější prohlížeče jsou nápadité ve své podpoře.
- Pak si myslíte Flash! Kódujte video jako soubor FLV. Flash však není podporován na mnoha mobilních zařízeních a mnozí lidé nenávidí Flash bez ohledu na to, jak je používán (25% respondentů v mém dotazování se ptá, jak si myslíte, že Flash uvedl, že nemohou Flash v žádném případě stát).
- Takže se rozhodnete nahrát své video na web pro vkládání videa, jako je YouTube, ale pak máte problémy s YouTube, o kterých jsme diskutovali.
- Konečně se rozhodnete pro HTML5, ale program Internet Explorer jej nepodporuje (ne do aplikace Internet Explorer 9). A i když to uděláte, existují dva standardy pro video kodek, které jsou podporovány a pouze jeden prohlížeč, který může používat oba. Podpora prohlížeče pro video kodeky a kontejnery
Tak co máš dělat? Poskytování videa již není pro většinu webových stránek k dispozici, protože video je stále důležitější. A mnoho stránek úspěšně přešlo na video.
Následující stránky tohoto článku vás seznámí s přidáním videa na vaše webové stránky, které pracují v prohlížečích Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 a 4, iPhone a Android, Flash a Internet Explorer 7 a 8. mají také klíče, které potřebujete přidat podporu pro ostatní starší prohlížeče v případě potřeby.
Pokračujte ve čtení níže
03 z 10Vytvořte a upravte své video
První věc, kterou potřebujete, když umístíte video na webovou stránku, je skutečné video. Můžete buď průběžně natáčet a následně upravovat, abyste vytvořili nějakou funkci, nebo ji můžete předem naplánovat a naplánovat. V každém případě funguje dobře, je to bez ohledu na to, s jakou jste spokojeni. Pokud nevíte, jaký typ videa byste měli provést, podívejte se na tyto nápady z Průvodci videokonference:
- Rodinné video projekty
- Marketingové a propagační videa
- Video virtuální prohlídky
- Jak na videa
- Svatební videa
Naučte se nahrávat vysoce kvalitní video
Ujistěte se, že jste věděli, jak nahrávat v interiéru i venku, a jak nahrávat zvuk. Osvětlení je také velmi důležité - snímky, které jsou příliš jasné, zranily oči a příliš tmavé vypadají blátivě a neprofesionálně. Dokonce i když máte v úmyslu mít na svém webu 30 sekundové video, tím vyšší je kvalita, tím lépe se bude zobrazovat na vašem webu.
Nezapomeňte také, že autorská práva se vztahují na všechny zvuky nebo hudbu (stejně jako stopy s fotografiemi), které můžete ve vašem videu použít. Pokud nemáte přístup k příteli, který vám může psát a přehrávat skladbu, budete muset najít hudbu bez licenčních poplatků, kterou chcete hrát na pozadí. K dispozici jsou také místa, která můžete na své video přidat.
Úpravy videa
Nezáleží na tom, jaký editační software používáte, jen tak dlouho, jak jste s ním obeznámeni a efektivně jej používat. Gretchen, Desktop Video Guide, má několik profesionálních tipů pro editaci videa, které vám pomohou upravit vaše videa tak, aby vypadaly skvěle.
Uložte své video do MOV nebo AVI (nebo MPG, CD, DV)
Zbytek tohoto tutoriálu předpokládáme, že vaše video bylo uloženo v nějakém typu vysoce kvalitního (nekomprimovaného) formátu jako je AVI nebo MOV. Zatímco tyto soubory můžete používat jako takové, narazíte na všechny problémy s videem, které jsme již diskutovali. Následující stránky vysvětlují, jak převést váš soubor na tři typy tak, aby byl zobrazen podle největšího počtu prohlížečů.
04 z 10Převést video na Ogg pro Firefox
První formát, který převádíme, je Ogg (někdy nazvaný Ogg-Theora). Tento formát je takový, že je možné prohlížeč Firefox 3.5, Opera 10.5 a Chrome 3 zobrazit.
Bohužel, zatímco Ogg má podporu prohlížeče, mnoho známých video programů, které si můžete koupit (Adobe Media Encoder, QuickTime atd.), Nenabízí možnost konverze Ogg. Takže jediný způsob, jak převést vaše video na Ogg, je najít konverzi na webu.
Možnosti konverze
Existuje online nástroj s názvem Media-Convert, který požaduje konverzi různých formátů videa (a zvuku) do jiných formátů videa (a zvuku). Když jsme to zkusili s mým 3sekundovým zkušebním videem, nemohli jsme ho dostat do práce na počítači Mac. Ale možná máte větší štěstí. Tato stránka má výhodu, že je zdarma.
Některé další nástroje, které jsme našli, zahrnují:
- Miro Video Converter (Windows Macintosh) - Tento program má výhodu převodu na Ogg i MP4 (H.264) a je to open source.
- Koyote Video Converter (Windows)
- Free Video Converter Myslíme si, že má verzi Windows i Macintosh, ale bylo těžké říct ze svých stránek
- Simple Theora Encoder (Macintosh) - toto je ten, který obvykle používáme.
Jakmile je vaše video uloženo ve formátu Ogg, uložte jej na místo na vašem webu a přejděte na další stránku a převeďte jej na jiné formáty pro jiné prohlížeče.
Pokračujte ve čtení níže
05 z 10Převést video do formátu MP4 pro Safari
Další formát, který byste měli konvertovat do videa, je MP4 (video H.264), aby mohl být přehráván v systémech Safari 3 a 4 a iPhone a Android. Navíc videa H.264 lze snadno převést do souborů FLV pro sledování na Flashu.
Tento formát je dostupnější v komerčních produktech a pravděpodobně již máte program, který převede na MP4, pokud máte video editor. Máte-li aplikaci Adobe Premiere, můžete použít Adobe Video Encoder nebo máte-li QuickTime Pro, který bude fungovat stejně. Mnoho konvertorů, které jsme diskutovali na předchozí stránce, také převede videa na MP4.
- MediaConvert - online nástroj AWS.
- Miro Video Converter (Windows Macintosh) - Tento program má výhodu převodu na Ogg i MP4 (H.264) a je to open source.
- SUPER (Windows) - převede mnoho různých typů souborů na MP4 a FLV
- Free Video Converter Myslíme si, že má verzi Windows i Macintosh, ale bylo těžké říct ze svých stránek.
Uložte soubor MP4 na své webové stránky a pak jej budete muset převést na aplikaci Flash pro aplikaci Internet Explorer.
06 z 10Převést video do FLV pro aplikaci Internet Explorer
Nejjednodušší způsob, jak převést videa do FLV, je použití samotného programu Flash. Tak převádíme videa na Flash. Pokud však nemáte Flash, jsou zde dva oblíbené nástroje pro převod souborů na FLV:
- SUPER (Windows) - převede mnoho různých typů souborů na MP4 a FLV
- ffmpegX (Macintosh) - převede mnoho různých typů souborů na Mp4 a FLV.
Uložte soubor FLV na svůj web a na další stránce vám ukáže, jak napsat HTML, abyste mohli přehrávat videa.
Pokračujte ve čtení níže
07 z 10Přidejte video element na svou webovou stránku
Pro přidání videa na webové stránky je velmi snadné použít HTML 5. Většina moderních prohlížečů podporuje video HTML 5, ačkoli to všichni nepodporují stejným způsobem. Ale co to znamená, že pokud uložíte video jako formáty Ogg i MP4, budete moci napsat ve čtyřech až pěti řádcích HTML, aby se zobrazil ve většině moderních prohlížečů (s výjimkou aplikace Internet Explorer 8). Zde je návod:
Zadejte značku HTML 5 doctype tak, aby prohlížeče věděly, že očekávají HTML 5:
- Vytvořte webovou stránku tak, jak ji obvykle vytvoříte:
- Uvnitř těla umístit
- Určete, jaké atributy chcete, aby vaše video mělo: Doporučujeme používat ovládací prvky a předběžné načtení. Použijte možnost plakátu, pokud vaše video nemá dobrou první scénu.
- automatické přehrávání - spuštění, jakmile je staženo
- ovládací prvky - umožňují čtenářům ovládání videa (pauza, převíjení vzad, rychlý posun vpřed)
- smyčka - spusťte video od začátku, až skončí
- preload - předem stahujte video tak, aby bylo připraveno rychleji, když zákazník klikne na něj
- plakát - definujte snímek, který chcete použít při zastavení videa
- Pak přidejte zdrojové soubory pro dvě verze videa (MP4 a OGG) uvnitř
- Otevřete stránku v prohlížečích Chrome 1, Firefoxu 3.5, Opera 10 a / nebo Safari 4 a ujistěte se, že se zobrazí správně. Měli byste to vyzkoušet alespoň v prohlížečích Firefox 3.5 a Safari 4 - jelikož každý používá jiný kodek.
A je to. Jakmile budete mít tento kód na svém místě, budete mít video, které funguje v prohlížečích Firefox 3.5, Safari 4, Opera 10 a Chrome 1. Co je však s programem Internet Explorer?
Internet Explorer nemá rád HTML 5 nebo
V další části se budeme bavit o tom, co můžete udělat, abyste mohli IE 8 hrát s vašimi značkami videa HTML 5 a zobrazit video. Musíte použít Flash.Dobrou zprávou je, že aplikace IE 9 podporuje HTML 5 a videokazetu.
08 z 10Přidejte JavaScript a přehrávač Flash Player, abyste mohli aplikaci Internet Explorer pracovat
Možná jste si všimli, že na HTML stránky předchozí stránky nebyl pro FLV soubor zdrojový řádek. A pokud jste tuto stránku testovali v aplikaci Internet Explorer, nefungovalo by to. To proto, že aplikace Internet Explorer nerozpoznává kód HTML 5 a nemůže nativně přehrávat videa OGG ani MP4. Chcete-li aplikace Internet Explorer 7 a 8 pracovat, musíte ji přehrávat jako Flash. Existuje však ještě více kroků, jak se dostat do práce, než jen přidat soubor FLV.
Krok 1: Získejte přehrávač Flash videa pro vaše webové stránky
Doporučujeme vám dostat aplikaci FlowPlayer, protože je to přehrávač Flash Player s otevřeným zdrojovým kódem, který můžete nainstalovat na webový server a používat jej vždy, když budete přehrávat video ve formátu Flash. Bezplatná verze nástroje FlowPlayer vloží reklamu do vašich videí, ale můžete je také zakoupit, pokud je budete potřebovat.
Postupujte podle pokynů na webu FlowPlayer a instalujte aplikaci FlowPlayer na vašem webu. Stručně řečeno, na vašem webu nainstalujete 2 soubory SWF a soubor JavaScript. V dolní části vašeho HTML (před tag) přidáte řádek:
Aplikace Internet Explorer však video stále nehraje, musíte se naučit, jak rozpoznat značky HTML 5.
Krok 2: Přesvědčte Internet Explorer, aby četl HTML 5 tagy
V kódu Google se nazývá "HTML Shiv", který pomůže IE rozpoznat prvky HTML 5. Takže v
dokumentu HTML, který chcete odkazovat. Nejlepší je uzavřít do IE podmíněných komentářů, aby ostatní prohlížeče nebyli zmateni:
Dobře, teď IE rozpozná
