Video na webu

Video je na internetu lákavým obsahem. Dříve se video na web dalo umístit pouze pomocí technologie Adobe Flash. To vyžadovalo adekvátní plugin pro prohlížeč, který si všichni museli stáhnout. Problémů spojených s Adobe Flash bylo ale mnoho (především se jednalo o bezpečnostní chyby) a tato technologie nás opustila. Od HTML verze 5 lze umístit video na web pomocí značky (tagu) video. Situace se tím velmi zjednodušila, ale přesto je třeba znát spojená omezení.

Zápis v HTML5 vypadá přibližně takto:

<video> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.ogg" type="video/ogg"> 
<track src="titulky_cs.vtt" kind="subtitles" srclang="cs" label="čeština"> 
<track src="titulky_sk.vtt" kind="subtitles" srclang="sk" label="slovenština"> 
</video>

Z příkladu je patrné, že stejné video lze zadat v různých kodecích. A to je poměrně důležité, protože každý prohlížeč umí jiné kodeky. Čím pestřejší nabídku kodeků prohlížeči nabídneme, tím máme větší šanci, že si něco vybere a tedy že se naše video dostane k divákovi. Pro kompatibilitu je nejpřehlednější tabulka níže.

Z tabulky vyplývá, že s formátem H.264 vytvoříme velmi dobrou šanci, že nám prohlížeč video přehraje. Je každopádně vhodné ještě doplnit OGG pro systémy a prohlížeče bez nakoupených licencí a případně AV1 pro doplnění kvalitnějšího videa či menšího souboru. Z tabulky je také zřejmé, že ve světe Apple nepochodíme se svobodnými kodeky bez patentů, ani s kodeky, na kterých se podílí Google.

Zápis typu u běžných kodeků je uveden v tabulce a obvykle nám vystačí. Ve specifických případech budeme chtít zapsat video a audio kodek oddělené čárkou (např. vp9, opus) nebo pro opravdu speciální účely budeme chtít zapsat i profil kodeku. Pro určení zápisu odkazujeme na speciální stránku vývojářů Mozilly, kteří tento zápis u nejčastějších kodeků dobře shrnuli.

Několik dobrých rad pro značku video:

• Pokud nám na webu nelze přehrát video např. ve formátu H.264/MP4, je vhodné video překódovat s baseline profilem, který zaručuje nejvyšší míru kompatibility.
• Nastavte adekvátně velikost videa (width, height), zrychlíte načtení stránky.
• Nabídněte i nižší rozlišení, např. pro mobilní zobrazení. Lze tak učinit např. takto:

  <source src="male_video.mp4" type="video/mp4" media="all and (max-width: 480px)">

Dnešní web je protkán javascriptem a není překvapením, že existuje i řada javascript video přehrávačů, které v místě video značky nahradí výchozí přehrávač prohlížeče. V následující tabulce uvádíme několik javascriptových přehrávačů.