Abychom si všichni mohli krátce vzpomenout, tady je příklad, jak klasicky vložit video do webové stránky:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Taková syntaxe je samozřejmě všechno, oč se nejedná.
A i když se na estetický aspekt prozatím nehledí: Tato syntaxe je v této podobě příliš chybová a složitá. V HTML5 lze videa mnohem snadněji vkládat. K tomu se používá prvek video.
Zde je příklad, jak lze tento prvek video vložit:
<video src="video.ogv" width="300" height="200"> Váš prohlížeč bohužel nepodporuje HTML5 </video>
Toto je nejjednodušší varianta. Tři atributy jsou v této syntaxi však důležité. Pomocí src je zadáno video k vložení. Dbejte tedy na správnou cestu k souboru. Obě atributy width a height určují šířku a výšku videa. Pokud nebude jeden z těchto atributů uveden, video bude zobrazeno v původní velikosti. Pokud je uvedena pouze jedna hodnota, druhá hodnota bude automaticky vypočítána prohlížečem. Atribut autoplay způsobí, že prohlížeč bude automaticky spouštět video po načtení stránky. Obvykle byste neměli tento atribut nastavovat, protože automatické přehrávání obvykle uživatelé nechtějí. Platí to zejména pro uživatele s mobilními zařízeními s nízkou šířkou pásma.
Dalším zajímavým atributem je controls. Při použití se prohlížeči zobrazí nativní ovládací prvky pro přehrávání a hlasitost.
<video src="video.ogv" width="300" height="200" controls> Váš prohlížeč bohužel nepodporuje HTML5 </video>
Zde je výsledek ve vašem prohlížeči:
Pomocí zobrazeného panelu lze video nejen zastavit a znovu spustit, ale také se nachází v něm ovládání hlasitosti.
Pomocí atributu poster lze určit obrázek, který se zobrazí do doby spuštění videa. Pro tento účel slouží atribut poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Váš prohlížeč bohužel nepodporuje HTML5 </video>
Dbejte zde opět na správné zadání cesty, aby se obrázek skutečně zobrazil.
Při použití atributu autoplay je třeba být opatrný. Tento atribut určuje, že video se má automaticky přehrávat, jakmile je dostupné.
<video src="video.ogv" width="300" height="200" autoplay> Váš prohlížeč bohužel nepodporuje HTML5 </video>
Pokud jde o provoz, může být zajímavý atribut preload. Tento atribut ovládá chování přednačítání. Atribut může mít následující hodnoty:
• auto – Prohlížeč může přednahrát celý soubor.
• none – Soubor není třeba přednahrávat.
• metadata – Soubor může být přednahrán.
Pokud chybí atribut preload, budou použity výchozí nastavení prohlížeče.
Videa a kodeky
Kdo se zabývá vkládáním a přehráváním videí na webových stránkách, brzy narazí na problém s různými kodeky. Díky těmto kodekům lze videa efektivně komprimovat a dekomprimovat. Problém spočívá v tom, že výrobci prohlížečů se dosud nedokázali dohodnout na společném formátu kodeku. Pro HTML5 (a tedy v konečném důsledku i pro vás) to znamená, že neexistuje jednotný formát kodeků pro videa a zvukové soubory.
Pro videa se stal standardem formátů Ogg a MP4. Proto jste vždy na bezpečné straně, pokud nabídnete video v těchto dvou formátech. K tomu přiřadíte prvku video dva prvky source.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Tady tedy neuvádíte zdroj videa uvnitř prvku video. Místo toho se uvedou obecné informace o zobrazení. Které video se zobrazí, určuje prvek source. Do atributu src se zdroji videa přiřadí odpovídající video. Za type následuje údaj o tom, jakého druhu video je nebo v jakém formátu video je k dispozici.
Pokud jsou uvedeny více prvků source, prohlížeč vždy přehraje první video, které "sedí". Co toto "sedí" znamená, bude popsáno níže.
Ale který prohlížeč vlastně podporuje jaký formát? Odpověď na tuto otázku poskytuje následující tabulka.
| Prohlížeč | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Od verze 9 | |
| Mozilla Firefox | Ano | |
| Google Chrome | Ano | Ano |
| Opera | Ano | |
| Safari | Ano | |
| iPhone | Ano | |
| Android | Ano |
Tabulka jasně ukazuje dilema: Interpretace formátů se téměř rovnoměrně rozděluje mezi jednotlivé prohlížeče. Proto je prakticky nutné uvést videa v obou formátech.
Pomocí atributu media, který může být přiřazen pouze prvku source, můžete explicitně uvést, pro který typ médií je video vhodné. Pro specifikaci videí určených pro konkrétní zařízení se atributu media přiřadí atribut src. Pomocí tohoto atributu media se určuje požadovaný typ médií.
Možné použití prvku source by mohlo vypadat následovně:
<video width="400" height="300">
<!-- Pouze pro mobilní zařízení -->
<source src="video_mobil.ogg" media="handheld" />
<!—Všechna ostatní zařízení -->
<source src="video_normal.ogg" media="all" />
</video>
Zde se pomocí atributu media zkontroluje, zda se jedná o mobilní zařízení. V tomto případě se přehraje video ve menší velikosti. Pokud se jedná o jiné zařízení, použije se hodnota all.
Videa bezpečně vložit
Je známo, že HTML5 zdaleka není podporováno všemi prohlížeči. To platí samozřejmě i pro prvek video. Řešením je kombinace různých způsobů vkládání. K tomu se kombinují známé prvky object a embed s prvkem video. To by mohlo vypadat následovně:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="pravda" /> <param value="nepravda" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="pravda" controller="nepravda" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Takováto vložená videa budou přehratelná ve většině prohlížečů. Prohlížeče, které znají prvek video, k němu přistoupí. Ostatní prohlížeče využívají informace v prvku object nebo právě v prvku embed.
