Aby sme si všetci mohli na chvíľu zaspomínať, tu je príklad, ako sa tradične vkladajú videá na webovú stránku:
<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>
Takýto syntaktický zápis je samozrejme všetko iné len pekný.
Aj keď neberieme do úvahy estetický aspekt: Takýto zápis je vo svojej podobe jednoducho príliš náchylný na chyby a príliš zložitý. Vo formáte HTML5 sa videá dajú vkladať oveľa jednoduchšie. Na tento účel sa využíva prvok s názvom video.
Tu je príklad, ako sa dá tento prvok video vložiť:
<video src="video.ogv" width="300" height="200"> Váš prehliadač, bohužiaľ, nie je kompatibilný s HTML5 </video>
Je to najjednoduchší spôsob. Pri tomto syntaktickom zápise sú však dôležité tri atribúty. Pomocou atribútu src sa špecifikuje video, ktoré sa má vložiť. Dbejte na správne určenie cesty. Oba atribúty width a height určujú šírku a výšku videa. Ak nie je uvedená žiadna z týchto hodnôt, video sa zobrazí vo svojom originálnom rozlíšení. Ak bol zadaný iba jeden z týchto dvoch atribútov, prehliadač automaticky vypočíta ďalšiu hodnotu. Attribút autoplay dáva pokyn prehliadaču, aby video začal predstihom, keď je stránka načítaná. Tento atribút by ste zvyčajne nemali nastavovať, pretože používatelia obvykle nechcú automatické prehrávanie videa. Platí to ešte viac pre používateľov so zariadeniami s malým pripojením.
<video src="video.ogv" width="300" height="200" controls> Váš prehliadač, bohužiaľ, nie je kompatibilný s HTML5 </video>
Tu je výsledok vo vašom prehliadači:
Pomocou zobrazeného panelu môžete video nielen pozastaviť a spustiť, ale tiež v ňom nájdete ovládacie prvky pre nastavenie hlasitosti.
Pomocou atribútu poster môžete určiť obrázok, ktorý sa zobrazí do začiatku videa. Na tento účel je používaný atribút poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Váš prehliadač, bohužiaľ, nie je kompatibilný s HTML5 </video>
Dbejte opäť na správnu cestu, aby mal obrázok možnosť zobrazenia.
Byť ostražitý pri použití atribútu autoplay je dôležité. Tento atribút určuje, že video sa začne automaticky prehrávať, keď je k dispozícii.
<video src="video.ogv" width="300" height="200" autoplay> Váš prehliadač, bohužiaľ, nie je kompatibilný s HTML5 </video>
Pokiaľ ide o prevádzku, atribút preload môže byť zaujímavý. Tento atribút ovplyvňuje správanie prednačítania. Atribút môže prijať tieto hodnoty:
• auto – Prehliadač má povoliť prednačítať celý súbor.
• none – Súbor nie je potrebné prednačítať.
• metadata – Súbor môže byť prednačítaný.
Ak chýba atribút preload, prehliadače sa budú riadiť predvolenými nastaveniami.
Videá a kodeky
Ak sa zaoberáte vkladaním a prehrávaním videí na webových stránkach, skôr či neskôr sa stretkáte s problémovými kodekmi. Vďaka týmto kodekom je možné videá efektívne komprimovať a dekomprimovať. Problém spočíva v tom, že výrobcovia prehliadačov sa doteraz nedokázali dohodnúť na spoločnom formáte kodeku. Pre HTML5 (a teda aj pre vás) to znamená, že pre videá a zvukové súbory neexistuje jednotný formát kodeku.
Pre videá sa medzitým etablovali dva formáty - Ogg a MP4. Preto ste vždy na bezpečnej strane, ak ponúknete video v týchto dvoch formátoch. Pre video-element priraďte dva source-elementy.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Takže tu nezadávate zdroj videa vo vnútri prvku video. Namiesto toho sú tu uvedené len všeobecné informácie o zobrazovaní. Ktoré video sa má zobraziť, určuje sa prostredníctvom prvku source. Do atribútu src sa priradí príslušné video. Za type nasleduje údaj o type videa alebo v akom formáte je video k dispozícii.
Ak sú uvedené viaceré prvky source, prehrávač vždy prehrá prvý súbor, ktorý "pasuje". Čo presne znamená toto "pasuje", je opísané nižšie.
Ale ktorý prehliadač vlastne podporuje ktorý formát? Odpoveď na túto otázku poskytuje nasledujúca tabuľka.
| Prehliadač | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Od verzie 9 | |
| Mozilla Firefox | Áno | |
| Google Chrome | Áno | Áno |
| Opera | Áno | |
| Safari | Áno | |
| iPhone | Áno | |
| Android | Áno |
Tabuľka jasne ukazuje dilemu: Rozloženie interpretácie formátov sa takmer rovnako rozdeľuje medzi jednotlivé prehliadače. Preto je takmer nutné uviesť videá v oboch formátoch.
Pomocou atribútu media, ktorý sa môže priradiť len prvku source, je možné explicitne určiť, pre aký typ médií je video vhodné. Na špecifikovanie videí pre určité zariadenia sa atribútu media priradí src. S týmto atribútom media je možné uviesť požadovaný typ médií.
Možným využitím pre prvok source by mohlo byť nasledovné:
<video width="400" height="300">
<!-- Iba pre mobilné zariadenia -->
<source src="video_mobil.ogg" media="handheld" />
<!—Všetky ostatné zariadenia -->
<source src="video_normal.ogg" media="all" />
</video>
Pomocou atribútu media sa skontroluje, či ide o mobilné zariadenie. V tomto prípade sa prehrá menšie video. Ak ide o iné zariadenie, použije sa hodnota all.
Videa bezpečne priadť
Je všeobecne známe, že HTML5 ešte nie je podporované vo všetkých prehliadačoch. To platí samozrejme aj pre prvok video. Riešením je kombinácia rôznych techník integrácie. Klasické prvky object a embed sú kombinované so video. To by mohlo vyzerať nasledovne:
<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="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Takto integrované videá by mali byť prehrateľné vo väčšine prehliadačov. Prehliadače, ktoré poznajú prvok video, sa k nemu pristupujú. Ostatné prehliadače naopak využívajú údaje v prvku object alebo v prvku embed.
