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

Komentáře

1
26 červen 2009, 10:06

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

 
2
26 červen 2009, 10:07

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

 
3
26 červen 2009, 13:25

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

 
4
afi
17 červenec 2009, 22:25

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

 
5
19 červenec 2009, 21:39

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

 
6
14 říjen 2009, 21:20

Dik, zrovna jsem to uspesne pouzila na nove Friendz :)

 
7
2 březen 2010, 20:50

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­.tym.cz/ele.a­vi
ale tadky třeba jo: http://l2.futu­regaming.cz/na­vod.wmv

 
8
Monika
7 březen 2010, 13:50

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 :))

 
9
Martin
27 březen 2010, 21:33

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

 
10
5 duben 2010, 22:24

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

 
11
5 duben 2010, 23:13

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
www.mkregion.sk/vi­dejko.htm

Ešte raz vďaka

 
12
Jiří
13 duben 2010, 07:17

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.

 
13
13 duben 2010, 10:14

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

 
14
Veru
18 květen 2010, 19:40

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

 
15
PePa
25 červenec 2010, 15:26

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čí.

 
16
30 červenec 2010, 18:49

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 www.strongman­.tym.cz Díkes:)

 
17
13 srpen 2010, 11:04

Po oprave kódu mi to funguje! Jééh
Vďaka :-)

 
18
13 srpen 2010, 13:58

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?
:-/

 
19
tom
21 říjen 2010, 20:02

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.

 
20
29 březen 2011, 00:41

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/

 
21
8 červenec 2011, 21:04

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

 
22
15 prosinec 2011, 17:31

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.

 
23
15 prosinec 2011, 17:50

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

 
24
15 prosinec 2011, 17:53

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

 
25
21 říjen 2012, 23:06

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

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce