V prvním ze svých blogů pro PC Pro , web Developer Ian Devlin odhaluje, jak vložit video na web pomocí HTML5
kde mohu vytisknout něco v mém okolí
Pravděpodobně největší a nejvíce mluvenou funkcí HTML5 je vložené video. V současné době je jedinou metodou přidávání videoobsahu na váš web plugin třetí strany, jako je Flash, QuickTime nebo RealPlayer. S úsvitem HTML5 a elementu videa se to všechno změní, podpora videa bude zpracovávána webovým prohlížečem, což odstraní potřebu jakékoli podpory třetích stran.
Několik webových prohlížečů již nabízí podporu pro HTML5. Zde prozradíme, jak můžete na svůj web vložit video bez pluginů a jaké problémy budete řešit.
Typy souborů a kompatibilita prohlížeče
Nejprve se stručně podíváme na různé typy video souborů, které jsou v HTML5 podporovány. Jedná se o Theora OGG a H.264 (.mp4). Různé prohlížeče podporují různé typy a některé nepodporují vůbec žádný. Označuje to následující tabulka:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | X |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | X | ✓ |
| Opera 10.5+ | ✓ | X |
| Internet Explorer 8 | X | X |
| Internet Explorer 9 | X | ✓ |
| iPhone | X | ✓ |
| Android | X | ✓ |
Kodeky a další technické problémy
Samotný HTML5 nespecifikuje videokodek, který se má použít, a to vedlo k argumentům o tom, který je nejlepší pro web . Abychom pokryli všechny prohlížeče, musíme podporovat oba kodeky.
A pak je tu samozřejmě Internet Explorer. V tuto chvíli žádná z vydaných verzí aplikace Internet Explorer nepodporuje prvek videa a pro přehrávání videa je stále vyžadován plugin. To se změní vydáním aplikace Internet Explorer 9 (pravděpodobně začátkem příštího roku), kdy bude podporována verze H.264, spolu s mnoha dalšími výhodami HTML5.
V případě, že vás zajímá, jak můžete převést své video soubory na OGG (více o typu Theora OGG si můžete přečíst na TheoraCookbook ) soubory pomocí Miro Video Converter .
Další podrobné informace o prvku videa a kodekech najdete na ponořte se do html5: videa na webu Mark Pilgrim.
HTML5 kód
Nyní přejdeme ke skutečnému kódu HTML5 a tomu, jak můžeme věc uvést do provozu. HTML5 nám poskytuje dva nové prvky, které můžeme použít k přidání videa na naše webové stránky: prvek, který jsme již zmínili, a živel. Podívejme se postupně na každou z nich.
Prvek
Prvek videa může mít následující atributy:
| Atribut | Popis |
|---|---|
| src | platnou adresu URL samotného videosouboru |
| automatické přehrávání | logická hodnota označující, zda se má video přehrávat automaticky |
| řízení | boolean označující, že by měl prohlížeč zobrazit výchozí ovládací prvky médií |
| smyčka | logická hodnota označující, zda má být video přehráváno opakovaně |
| předpětí | označuje prohlížeči, zda je nutné preventivní stahování samotného videa, nebo zda je potřeba pouze metadata. Možné hodnoty jsou:
|
| plakát | URL obrázku, který se zobrazí, když nejsou k dispozici žádná video data |
| šířka | šířka videa v pixelech CSS |
| výška | výška videa v pixelech CSS |
Z toho je vidět, jak snadné je vložit video OGG na váš web pomocí samotného prvku videa:
To je opravdu vše.
Jakýkoli prohlížeč, který podporuje formát Theora OGG, by nyní měl vaše video úspěšně zobrazit a přehrát bez dalších okolků. Samozřejmě to není tak snadné, protože jak jsme viděli z výše uvedené tabulky, kód by fungoval pouze ve Firefoxu, Chrome a Opera. Musíme tedy mít také záložní verzi H.264. Toho lze dosáhnout pomocí prvek, který nám umožňuje definovat více zdrojů médií pro prvek videa.
jak zapnout hlasový chat ve Fortnite
Prvek
Zdrojový prvek má následující atributy:
| Atribut | Popis |
|---|---|
| src | platnou adresu URL samotného mediálního (v tomto případě video) souboru |
| typ | typ mediálního souboru, který musí být a Typ MIME , např. type='video/ogg' označuje, že se jedná o video Theora OGG, a můžete také poskytnout kodek MIME, který pomůže prohlížeči rozhodnout, jak video přehrát, pomocí type='video/ogg; codecs='theora, vorbis'. |
| polovina | udává zamýšlený typ média mediálního zdroje a musí být platný mediální dotaz , např. media='handheld' označuje, že video je vhodné pro kapesní zařízení nebo media='all and (min-device-height:720px)' což znamená, že video je vhodné pro obrazovky 720 pixelů nebo více. |
Poznámka: zdrojový prvek je neplatný a má počáteční značku, ale žádnou uzavírací značku
Nejužitečnější na zdrojovém prvku je, že jej můžeme použít k naskládání různých typů souborů, což umožňuje prohlížeči vyzkoušet každý po druhém, dokud nenajde ten, který dokáže přehrát.
Pomocí a společně
Aby bylo možné skládat videa do různých typů v rámci prvku videa, zadáme kód následujícím způsobem:
Your browser does not support the video element.
Výše uvedený kód bude nyní fungovat ve všech prohlížečích kromě aplikace Internet Explorer, která zobrazí výše uvedenou zprávu.
Můžete to otestovat sami na stránce Testovací video HTML5, která obsahuje ukázkové video motýla ve formátu Theora OGG i MP4, takže pokud si toto prohlížíte ve Firefoxu, Chrome, Safari, Opera nebo na iPhonu nebo Sluchátko Android, měli byste být schopni jej zobrazit.
Ostré nože mezi vámi si nyní všimnou, že můžeme využít tohoto stohování a mít v dolní části záložní Flash (nebo nějaký jiný plugin) namísto zobrazení líto, že tuto video zprávu nevidíte, pomocí následujícího kódu :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Závěr
Stejně jako u většiny prvků HTML5 je podpora zdrojů a prvků videa v prohlížeči v současné době nerovnoměrná. V tuto chvíli také probíhá velká debata o tom, zda zdrojový prvek zabije použití Flash jako nejoblíbenější metody přidávání videoobsahu na webové stránky. Nejsem si jistý, jestli to Flash úplně zabije, ale přesto si myslím, že je fér říci, že tu zůstane, a poskytne webovým vývojářům čistší a snadnější přístup k vkládání videa.
