Tutoriál HTML5: Ako jednoducho vložiť video nahrávku do webovej stránky

Tutoriál HTML5: Ako jednoducho vložiť video nahrávku do webovej stránky

Podobne ako pre zvuk, aj pre video súbory má jazyk HTML5 svoju štrukturálnu značku - element. Ide o element <video></video>. Element funguje spoľahlivo bez použitia ďalších zásuvných modulov v týchto internetových prehliadačoch:
- Internet Explorer 9
- Safari
- Firefox
- Google Chrome

Tradične môže problém nastať pri starších verziách internetových prehliadačov, hlavne pri Internet Explorer 8 a menej, pretože tieto prehliadače element <video> neakceptujú.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<video controls>
	<i>na prehrávanie videa potrebujete nainštalovať zásuvný modul</i>
    <source src="Hey_Jude.mp4">
</video>
</body>
</html>

K tomuto kódu sme pridali oznámenie o potrebnosti inštalácie zásuvného modulu, ktoré sa zobrazí v prípade, že video sa nebude prehrávať.
Tento kód neumožňuje automatické prehrávanie videa. Video je potrebné spustiť pomocou ovládacích prvkov prehrávača. Avšak pridaním atribútu autoplay automatické prehrávanie zabezpečíme. Taktiež vieme pridaním atribútov šírka a výška upraviť rozmery okna prehrávača, respektíve to riešiť aj použitím kaskádových štýlov. Ponúkneme aj možnosť si video stiahnuť v prípade, že nie je možné ho na internetovej stránke prehrať. Upravený kód vyzerá takto:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<video controls autoplay width="500">
  <i>na prehrávanie videa potrebujete nainštalovať zásuvný modul</i>
  <source src="Hey_Jude.mp4">
  <a href="Hey_Jude.mp4">Hey_Jude.mp4 - stiahnite si video</a>
</video>
</body>
</html>

Aké formáty videosúborov je možné na webovej stránke použiť?
Existuje veľké množstvo formátov videosúborov, ale nie všetky je možné prehrávať na webovej stránke. Video pred samotným vložením na webovú stránku je potrebné previesť do niektorého z týchto formátov:
- WebM
- MP4
- Ogg

Bližšie o týchto formátoch, ich vlastnostiach v niektorom s budúcich článkoch.

Na záver musíme uviesť, že aj napriek jednoduchosti vkladania videa pomocou kódu HTML5 existuje niekoľko problémov s tým spojených:
- problém so streamovaním videa (prakticky sa nestreamuje vôbec)
- video je potrebné kódovať, niekedy aj do viacej formátov a tento proces dosť často odrádza od používania videa v HTML5.

Rubriky: