Jak umístit video na stránku

Nedávno jsme ve firmě řešili, jak nejlépe umístit video (.flv formát) na naše webové stránky. V podstatě existují dvě základní možnosti – uložit video na YouTube, či jiný podobný server a z vlastních stránek se jen odkazovat, případně použít jejich přehrávač.

A nebo video uložit na vlastní server a mít nad ním plnou kontrolu – což byla naše volba. K přehrávání pak ale potřebujete najít vhodný flashový přehrávač (celou dobu tu píšu o videu ve formátu FLV – Flash Video). Popravdě existuje jich spousta (viz například články tady nebo tady), stačí si jen vybrat

Já jsem požadoval takový, co je nezávislý na JavaScriptu, snadno se zabuduje do stránek, nabízí spoustu parametrů, kterými můžu ovlivnit jeho vzhled a chování, podporuje konfiguraci v externím souboru (výhodné pro vkládání vícero videí) a je zdarma i pro komerční použití (pro nekomerční je tu bezkonkurenční JW FLV Media Player).

FLV Player

Všechna tato má očekávání nakonec splnil open source FLV Player (ve verzi Maxi).

Jeho hlavní funkce a možnosti nastavení jsou tyto:

• základní konfigurace v txt nebo xml souboru, jednotlivé parametry lze „přebít“ jejich opětovným uvedení v HTML kódu pro vložení přehrávače do stránek
• lze přizpůsobit vzhled přehrávače – které prvky bude obsahovat jaké budou mít barvy, „skin“ nebo spíše obrázek na pozadí přehrávače
• podporuje titulky (v srt formátu)
• umí zobrazovat překryvný obrázek (například logo v rohu videa)
• přehrávání lze ovládat klávesnicí
• možnost zobrazit úvodní obrázek a popisku videa
• přehrávač lze ovládat i JavaScriptem (lze udělat vlastní tlačítka pro přehrávání, nastavení hlasitosti atd)
• na stránkách je generátor kódu pro vložení do stránek
• verze MULTI podporuje playlisty
• existují pluginy pro různé CMS systémy

Další podrobnosti najdete v dokumentaci přehrávače.

Vložení videa do stránek

Zabudování do stránek je poměrně jednoduché:

<object type='application/x-shockwave-flash'
data='player_flv_maxi.swf' width='420' height='261' id='video-object'>
    <param name='movie' value='player_flv_maxi.swf'>
    <param name='allowFullScreen' value='true'>
    <param name='FlashVars' value='config=config.txt&flv=video.flv&startimage=video.jpg'>
</object>

Textový soubor s nastavením přehrávače config.txt:

showvolume=1
showtime=1
showfullscreen=1
showiconplay=1
showplayer=always

playercolor=FFFFFF
bgcolor=FFFFFF
bgcolor1=FFFFFF
bgcolor2=FFFFFF
buttoncolor=888888
buttonovercolor=000000
slidercolor1=DDDDDD
slidercolor2=DDDDDD
sliderovercolor=999999
loadingcolor=999999
videobgcolor=FFFFFF

A výsledek (zde pouze obrázek) vypadá takto:

Ale abych jen nechválil, ještě mi u tohoto přehrávače chybí například podpora Google Analytics – možnost sledovat ve statistikách kolik návštěvníků si video přehrálo (celé nebo jen částečně).