Jak umístit video na stránku

Jak umístit FLV video na stránkuNedá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:
Umístění FLV videa do stránky pomocí FLV přehrávače

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ě).

Petr Václavek

Zobrazit příspěvky od Petr Václavek
Grafik na volné noze, kterého živí kreslení pro zahraniční microstock fotobanky, příležitostný fotograf, tvůrce dubánků, velký lenoch, čajopijec, a vášnivý čtenář.

25 Komentářů

  1. oring
    26. 6. 2009

    hele ja to dam do stranek a ukaze mi to jen prazdne bile okno , co je s tim?

    Odpovědět
  2. oring
    26. 6. 2009

    pls posli mi zpravu na e-mail jak se to ma udělat dik

    Odpovědět
  3. Petr Václavek
    26. 6. 2009

    Pošli mi adresu, kde to máš a já se na to kouknu.

    Odpovědět
  4. afi
    17. 7. 2009

    Ako sa dá vložiť logo, resp. krátky popisok (napríklad meno osoby)?

    Odpovědět
  5. Petr Václavek
    19. 7. 2009

    [4] Je to popsáno v dokumentaci – odkaz na ni je v článku uveden.

    Odpovědět
  6. Jana
    14. 10. 2009

    Dik, zrovna jsem to uspesne pouzila na nove Friendz 🙂

    Odpovědět
  7. Merlin
    2. 3. 2010

    ahoj.já se chci zeptat,taky mi to stále nejede a to sem skusil mnoho přehrávačů.
    ale asi tušim co to je ale neumim to spravit
    mě se to nerozběhne hned: http://fyzweb&#173;.tym.cz/ele.a­vi
    ale tadky třeba jo: http://l2.futu­regaming.cz/na­vod.wmv

    Odpovědět
  8. Monika
    7. 3. 2010

    ahoj, mám problém stejný jako ti přede mnou, mám pouze prázné bílé okno…a jaký formát videí to podporuje? díky za odpověď na mejl :))

    Odpovědět
  9. Martin
    27. 3. 2010

    zdravím,
    jen jsem chtěl autorovi poděkovat za fajn návod ke vkládání videa na web.
    Zdravím

    Odpovědět
  10. petrik1
    5. 4. 2010

    Pozdravujem,
    skúsil som si vložiť video podľa vášho nástroja, ale akosi mi to nefunguje. Nepozreli by ste sa mi na môj web prečo? Musí byť veľkosť flv nejako obmedzená?
    Srdečná vďaka

    Odpovědět
  11. petrik1
    5. 4. 2010

    Upresním, že v Mozille mi to ide v IE8 nie a nevšimol som si, že sa v mojej predošlej správe nezobrazil web
    http://www.mkregion.sk/vi­dejko.htm

    Ešte raz vďaka

    Odpovědět
  12. Jiří
    13. 4. 2010

    Mám stejný problém. V IE8 to funguje pouze tehdy, když je flv spouštěno z lokálního disku typicky c:\neco\video.htm. Když je spouštěno z webu, je výsledkem bílá obrazovka a také se nezobrazí úvodní fotografie.

    Odpovědět
  13. Petr Václavek
    13. 4. 2010

    Zdravím,
    Petrik1, mrknul jsem na tvůj kód a máš tam chybu v tomto řádku:

    <param name=video

    Správně má být

    <param name=movie

    Odpovědět
  14. Veru
    18. 5. 2010

    Ahoj, chci se zeptat,jak nastavit video tak,aby se nespustilo s otevřením stránky a nebo přejetím videa myší?

    Odpovědět
  15. PePa
    25. 7. 2010

    Děkuji!

    Konečně stránka, podle které jsem si vytvořil své HTML soubory tak, abych v nich mohl přímo sledovat FLV nebo MP4 soubory bez připojení na internet. A uvedený FLV Player Maxi mi k tomu bohatě stačí.

    Odpovědět
  16. EvzEn
    30. 7. 2010

    Zdravím, předem chci autorovi poděkovat za jeho skvělý návod na umístění videa na web.

    Mám však problém, že se moje videa nezobrazí v IE8 ani IE6. Mohl by mi někdo prosím pomoci ?? Jedná se o videa umístěná na webu http://www.strongman­.tym.cz Díkes:)

    Odpovědět
  17. petrik1
    13. 8. 2010

    Po oprave kódu mi to funguje! Jééh
    Vďaka 🙂

    Odpovědět
  18. petrik1
    13. 8. 2010

    takže videjko mi ide. Len sa mu snažím nastviť nejaké parametre (prehrávaču), ale to sa mi akosi nedarí. Napr. biely podklad chcem vymeniť za modrý, spúšťaciu ikonu v strede videa dať preč a pod. Parametre som menil v config.txt, ale zmena žiadna
    showvolume=1
    showtime=1
    showfullscreen=1
    showplayer=always

    playercolor=00CCFF
    bgcolor=00CCFF
    bgcolor1=00CCFF
    bgcolor2=00CCFF
    buttoncolor=888888
    buttonovercolor=000000
    slidercolor1=00CCFF
    slidercolor2=00CCFF
    sliderovercolor=999999
    loadingcolor=00CCFF
    videobgcolor=00CCFF
    Kde robím chybu?
    :-/

    Odpovědět
  19. tom
    21. 10. 2010

    používám tento způsob asi 5 let. Dosud vše OK, ale v nových W7 hlásí player „video nepodporováno nebo zakázáno“. Při spuštění stejné stránky z flešky (na stejném PC) nebo z web. serveru je vše ok. Pouze z HDD to nejede! To je záhada(?!). Zkoušel jsem player_flv_maxi, player JW a další… vše stejné. Nezáleží na prohlížeči. Na ostatních OS vše chodí OK.Jo, přehrávám soubory flv, které normálně chodí na tomtéž compu v běžném FLV playeru.

    Odpovědět
  20. JonnyDrake
    29. 3. 2011

    Hej… Petře. Hledám na webu kde by mi poradily s videem na stránkách a nakone jsem skončil u Tebe 🙂

    Super prográmek, dík za tip.

    Ta možnost si to nagenerovat přímo na jejich stránkách je super…

    http://flv-player.net/…i­/generator/

    Odpovědět
  21. daren
    8. 7. 2011

    prosimvas jestly byste se mohli podivat na muj web ktery sem ted zacal a nechci dal pokracovat nez rozjedu to video http://ceprik&#173;.wz.cz/ mohly byste se mi podivat nato prosimvas někdo ukazuje to bule okno jenom

    Odpovědět
  22. marian
    15. 12. 2011

    Poprosil bych o radu, článek mne potěšil, našel jsem co jsem hledal, ale nedaří se mi stáhnou player_flv_ma­xi.swf. Po kliknutí na odkaz jsem čekal nabídku k uložení souboru, ale zatím se v prohlížeči objeví okno přehrávače a program nestáhnu. Co a jak bych měl nastavi, abych player_flv_maxi.swf stáhnul.

    Odpovědět
  23. Petr Václavek
    15. 12. 2011

    Mělo by stačit na odkaz kliknout pravým tlačítkem a z kontextové nabídky pak vybrat Uložit odkaz jako…

    Odpovědět
  24. marian
    15. 12. 2011

    Díky, nebo použít klik s klávesou Alt… taková prkotina 🙂

    Odpovědět
  25. bayaya
    21. 10. 2012

    vie prosím niekto poradiť prečo sa v IE nezobrazí startimage???
    pozri môj web http://andrej­hlavaty.sk/

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Skočit na začátek stránky