HTML5 Video tag v praxi

Video vložené na web stránku pomocou HTML5 video tagu môže pekne oživiť stránku, ale na druhej strane treba rátať aj s obmedzeniami, ktoré prináša. V tomto článku sa dozviete, ako treba správne nastaviť video tag tak, aby sa video prehralo na rôznych zariadeniach.
Zaujali sme Vás?
Zobraziť kontaktné údaje

Medzi najčastejšie spôsoby ako umiestniť video na web stránku je nepochybne pomocou služby youtube.com, ale v tomto článku sa budeme venovať problematike vloženia videa na web stránky pomocou HTML5 Video tagu. Ten by mal postupne nahradiť prehrávače ktoré využívajú technológie ako flash alebo silverlight.

HTML5 Video tag

Slúži na prehrávanie videa na web stránke využitím natívnej podpory webových prehliadačov. Až príchodom HTML5 sa definuje štandard pre vloženie videa na web stránku.

Nasledujúca tabuľka kompatibility vám prezradí, v ktorých verziách webových prehliadačov vám bude tento tag fungovať.

Prehliadačmi podporované video formáty

Dôležité je spomenúť, aké formáty videa dokážu jednotlivé prehliadače prehrať. Momentálne sú 3 základné a to: MP4, WebM a Ogg. Odporúčam pripraviť si všetky tri typy zdrojov.

Prehľadné tabuľky kompatibility jednotlivých formátov nájdete tu:

MP4: MPEG-4/H.264 video format

WebM: WebM video format

Ogg: Ogg/Theora video format

Základná HTML štruktúra

HTML zápis video tagu môže byť nasledovný:

<video width="320" height="240" controls loop preload="yes" poster="/images/video.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
  Obrázok/text
</video>

Odporúča sa vkladať všetky zdroje podporovaných video formátov, aby sa video prehralo vo všetkých prehliadačoch a zariadeniach. Obrázok/text pod video zdrojmi slúži pre staršie prehliadače, ktoré nepodporujú tento tag. V takomto prípade sa zobrazí napísaný text, alebo obrázok. Dôležité je aj poradie v akom sa vložia zdroje videa. Ako prvé musí ísť mp4, následne webm a posledné ogg. Takto vložené video na web stránku sa nám prehralo na stolných počítačoch a notebookoch.

Ako vložené video prehrať aj na ostatných zariadeniach?

Video sa síce prehralo na pc a notebookoch, ale na tabletoch a mobiloch nefungovalo. Dôvodom bolo kódovanie videa. Aby sa takto vložené video na web prehralo všade správne, musia byť dodržané prísne parametre pri kódovaní videa. Keďže väčšinou klient dodá videá zle dobre kódované, treba ich upraviť. Na toto sme použili program HandBrake, pomocou ktorého sme vytvorili prekódované mp4 video a program Miro Video Converter pre formáty webm a ogg.

HandBrake sme použili preto, že jednak má oveľa viac možností a nastavení oproti Miro Video Converter-u a tiež preto, že mp4 je asi najdôležitejší formát zo všetkých vyššie spomínaných a má asi najlepšiu podporu v prehliadačoch.

Na prekódovanie videa sme použili nasledovné nastavenia v programe HandBrake:

 Nastavenie pre HandBrake

Po vložení zdroja pomocou tlačidla Source a zadaním názvu výstupného súboru v časti Destination je dôležité nastaviť Container na mp4 a zaškrtnúť Web Optimized. V záložke Video nastaviť Video Codec na H.264 a vpravo v sekcii Presets zvoliť Devices - Universal.

Na prekódovanie videa do ostatných formátov (webm a ogg) môžeme použiť Miro Video Converter s nasledovným nastavením.

Pre WebM:

Kódovanie WebM Videa

Pre Ogg:

Kódovanie Ogg Videa

Takto vložený video html5 tag so zdrojmi videa sme otestovali a bez problémov fungoval na rôznych zariadeniach (PC, notebook, tabletoch a mobiloch) či už s Androidom, alebo na iOS, taktiež na rôznych prehliadačoch (Opera, Firefox, Chrome, Safari, ...).

Ak máte svoje vlastné skúsenosti s implementovaním html5 video tagu, alebo iné tipy a triky, napíšte mi prosím do komentáru k článku, rád sa nechám inšpirovať.

Diskusia ku článku
  Pridať komentár
Leilalee
20.06.2016, 10:58
Nice post! I would like to share a useful tool here: Leawo Video Converter, which has lots of powerful functions on converting different videos. Maybe it is another choice for users.
Safe link to Leawo Video Converter: http://www.leawo.org/video-converter/
  Reagovať