0 Kč s DPH
  • WYSIWYG verze 3.5
    • Návod je vytvořen ve WYSIWYG editoru verze 3.5 Více »

Video v inPage

V tomto článku si ukážeme, jak vložit do vašich stránek video soubor, který si vaši návštěvníci mohou okamžitě přehrát bez nutnosti stahnovat jej do svého počítače.

Pro přímé přehrávání video souborů je potřeba využít nějaký flash přehrávač - na internetu je jich dostatek ke stažení (dávejte pozor na licenční podmínky, ne vždy můžete přehrávač použít např. v komerčních aplikacích). Můžete využít ale přímo přehrávač FlowPlayer, který je součástí inPage a který naleznete na adrese /swf/flowplayer/flowplayer.swf.

Nahrání video souboru do inPage

Postup nahrání zdrojového videa pro přehrávání do systému inPage je shodný s nahráním mp3 souboru, který je popisován v předchozí kapitole Hudba v inPage, a nebudeme jej zde proto detailně rozebírat. Za pozornost ale stojí fakt, že ne každý video formát můžeme pomocí FlowPlayeru přehrát (AVI, MPEG, apod. k tomuto účelu použít nelze). V současné době nejrozšířenějším formátem pro přehrávání videa na internetu je  Flash Video (FLV, více si můžete přečíst např. zde), který umí FlowPlayer bez problémů přehrát. Většinou ale bude nutné, převést vaše videa z formátu AVI či MPEG do FLV.

Převod ve Windows

Pro převod videa do formátu FLV je možné použít např. Adobe Flash VideoEncoder, který je obsažen v rámci programu Adobe Flash, ale jehož nevýhodou je vysoká cena. Vhodnější proto bude stáhnout si a nainstalovat program RivaVX FLV Encoder, který je volně k dispozici.

Převod v LINUXu

V systému LINUX použijeme pro převod videa do FLV formátu program mencoder, který je součástí balíku MPlayer. Na ukázku si ukážeme příkaz pro převod souboru source.avi do FLV videa output.flv:

mencoder source.avi -o output.flv -of lavf \
-oac mp3lame -lameopts abr:br=56 -srate 22050 \
-ovc lavc -lavcopts vcodec=flv:vbitrate=1500:mbd=2:mv0:trell:v4mv:cbp:last_pred=3

Teprve takto získaný FLV soubor nahrajeme do systému inPage (jelikož velikost video souborů je většinou větší než 8MB, je nutné video nahrát na FTP).

Dalším krokem je vložení flash přehrávače flv videa na stránky a nastavení přehrání vámi uloženého flv souboru.

Vložení videa na stránku přes WYSIWYG

Nejjednodušším (a doporučovaným) způsobem vložení videa do vašich stránek je možnost využít funkci WYSIWYG editoru. Nad editorem stránky najdete 3 řady ikon, poslední ikona ve třetí řadě Vložit/Upravit média (ikona filmového pásu) slouží pro vkládání či editaci videa.

Pomocí ikonky filmového pásu zobrazíte okno pro editaci vkládaného souboru/videa:

Vyberete si Soubor/URL vašeho videa přes ikonu Procházet (tj. ikona vedle řádku URL adresa) a Typ zvolte Flash. Editor přehraje video pomocí svého interního flash přehrávače. Pokud se video na webu spouští automaticky, můžete se vrátit do editace souboru a v záložce Rozšířené zrušit volbu "Automatické přehrávání".

Pokud jste si vaše video nahráli na FTP, poté nepůjde načíst soubor přes ikonu Procházet. Musíte zadat URL adresu souboru ručně, a to následovně: http://www.nazev-domeny.cz/ftp/nazev-videa-swf

Vložení videa na stránku pomocí JavaScriptu

Vytvořte si libovolný aktivní článek a klikněte na ikonu WYSIWYG editoru Editovat HTML kód. Do otvřeného okna vložte následující kód:

<a href="/ftp/output.flv" style="display:block;width:425px;height:300px;" id="player"></a>
<script src="/swf/flowplayer/flowplayer.min.js" type="text/javascript"></script>
<script language="JavaScript">
flowplayer("player", "/swf/flowplayer/flowplayer.swf", {clip: {autoPlay: false,}});
// ]]></script>

(pozor: pokud máte na FTP uloženou hudbu nebo video ve složce, musí v názvu cesty k
souboru stát i název složky, např.
/ftp/video/output.flv)

Media v inPage - media-video.jpg (normální)
Obr.1: Vložení HTML kódu flash přehrávače

Z celého kódu nás zajímá pouze tučně zvýrazněný kód /ftp/output.flv, který ukazuje na umístění videa, které chceme přehrát (v tomto případě je to soubor output.flv uložený do kořene FTP inPage). Program FlowPlayer ma mnoho nastavení a voleb, vše i s názornými příklady naleznete na stránkách přehrávače.

Konkrétní použítí FlowPlayeru na stránkách inPage můžete vidět např. na www.jaroslavaurbanova.cz.

Co dělat v případě, že video na stránkách nepřehrává?

Přejděte znovu do administrace stránky a zkontrolujte ve zdrojovém HTML kódu (přes ikonku HTML), zda se nevytratila část vámi vloženého kódu. Pokud část kódu chybí, může za to wysiwyg editor, který vámi vložený javaskript nezpracoval na 100% správně. V některých případech tato situace může nastat, např. po aktualizaci wysiwyg editoru v inPage.

Vypnutý wysiwyg editor v inPage

Vypnutí wysiwyg editoru

V případě, že se vámi vložený kód s videem neuložil celý, poté bude nutné vložit jej do stránky znovu, avšak bude nutné dočasné vypnutí wysiwyg editoru.

Pro vypnutí přejděte v administraci inPage do sekce Nastavení -> Nastavení prostředí, a zde zrušte volbu "Zobrazit editor" (viz obrázek vpravo) a změnu uložte.

Vložení javaskriptu do stránky při vypnutém wysiwyg editoru

Máte-li zkopírovaný zdrojový kód videa a vypnutý wysiwyg editor, přejděte do administrace stránek, konkrétně do editace té stránky, kam chcete video vložit. Na místo wysiwyg editoru uvidíte v obsahu stránky přímo zdrojový HTML kód stránky (viz obrázek níže). 

Vložení zdrojového kódu tlačítka +1 do HTML kódu stránky
Ukázka vložení zdrojového kódu tlačítka mezi 2 odstavce webové stránky

Do HTML kódu stránky vložte vámi zkopírovaný zdrojový kód videa. Kód vložte na nový řádek za odstavec uzavřený v HTML tagu <p></p> viz názorný příklad na obrázku. 

Celou stránku uložte zeleným tlačítkem Upravit stránku.

Nezapomeňte nastavit...

Nesmíte zapomenout na to, že je třeba:

  • jméno videa uvádět bez diakritických znamének
  • v sekci Nastavení musí být přepnuto na otevřít v prohlížeči

Kontrola zobrazení videa na webu

Než znovu zapnete wysiwyg editor v inPage, zkontrolujte nejdříve, zda se vaše video na webu zobrazilo a zda se přehrává. Pokud ano, poté můžete wysiwyg editor v administraci opět zapnout v sekci Nastavení -> Nastavení prostředí.

Při pozdější editaci stránky, která obsahuje již vložené video, doporučujeme wysiwyg editor znovu vypnout.

Přejeme vám úspěšné vkládání videa na web

 

 

Hanka Medková
hana.medkova(zav)zoner.cz

Přidat komentář

Největší město Moravy?

Přehled komentářů

  • Nefunkční video

    3.2.2014 13:40:31 | Petr Lebeda

    Níže uvedené informace jsem posílal:
    1) na kontaktní mail, uvedený na konci tohoto blogu (hana.medkova@zoner.cz) 18.1.2014
    2)na info@zoner.cz na základě mailového sdělení, že kontaktní mail již neplatí (19.1.2014)
    3) na admin@zoner.cz po telefonátu se zákaznickou podporou (30.1.2014).

    Dobrý den,
    uvádím doplňující údaje k položkám č 13 - 15 blogu k článku Video v Inpage, týkajícím se toho, že mi na stránkách www.lebedovi.cz přestala fungovat vložená videa. Obratem byla vložena odpověď, že šlo o chybu a vše je v pořádku. Napsal jsem, že bohužel není, ale bez odezvy. Vložená videa skutečně fungují, ale pouze někde. Vypadá to takto:
    Operační systém WinXP, IE8 - ano
    OS Win7, IE 11 - ne
    OSWin7 , Gogle Chrome 32 - ano
    OS Win7, Opera 12-16 - ne
    OSWin7 , Firefox 23.01 vyžaduje zásuvný modul
    OSWin 8.1, IE 11 - ne
    OSWin8.1, Google Chrome 32 - ano
    Bohužel nemám možnost to vyzkoušet na větším počtu operačních systémů a prohlížečů, ale byl bych rád, kdyby si ty stránky mohl prohlédnout každý, bez ohledu na to, jak skvěle nebo špatně je vybaven. Pokud jde o IE 11, objeví se po kliknutí na místo kde má být přehrávač nabídka Adobe Flash Playeru - možná že v tom je zakopaný pes - ale jak ho vykopat?
    Omlouvám se, že obtěžuji a předem děkuji za pomoc
    Petr Lebeda

  • RE: Nefunkční video

    3.2.2014 12:22:06 | Vladimír Souš

    Dobrý den pane Lebedo,
    prosím o zaslání informace, co přesně se Vám nedaří, jaký používáte prohlížeč a operační systém. Mně uvedená videa fungují normálně.

  • Nefunkční video

    14.1.2014 15:03:53 | Petr Lebeda

    Díky za zprávu, ale video bohužel stále není funkční. Jediné video, které funguje, je z roku 2011 v článku "Babičce bylo 95", a to jsem vkládal jiným způsobem než ta další, vkládaná podle vašeho návodu.
    Petr Lebeda

  • Re: Nefunkční video

    10.1.2014 11:01:55 | Admin

    Dobrý den,
    problém byl na naší straně, nyní už je vše v pořádku.
    Tým inPage

  • Nefunkční video

    9.1.2014 15:37:28 | Petr Lebeda

    Dobrý den,
    mám stránky www.lebedovi.cz a na některých z nich vložené video. Nějakou dobu jsem stránky nenavštívil a dnes jsem zjistil, že tato videa nefungují, a to ani na mém počítači s Win8, ani na počítači manželky s Win7, ani na počítači s WinXP. Jedná se o videa v rubrice "Z našeho života", např. článek "Setkání se srncem", "Setkání s matkou", "Ariss a třísky" a další. Vzhledem k tomu, že v nastavení jsem nic neměnil nechápu, čím by to mohlo být. Prosím o radu a pomoc se znovuzprovozněním. Děkuji
    Petr Lebeda

  • RE: Pomoc

    6.8.2013 8:05:24 | Vladimír Souš

    Dobrý den, postup uvedený v návodu se používá, pokud máte video v souboru nahrané v sekci soubory nebo na FTP.
    Pokud chcete vložit video z adresy http://vimeo.com/55414777
    stačí kliknout na tlačítko share vpravo nahoře a zkopírovat část EMBED. Následně kód vložit přímo do HTML editoru stránky inPage:
    <iframe src="http://player.vimeo.com/video/55414777?byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/55414777">Kyäni Products: Europe</a> from <a href="http://vimeo.com/user4184056">Kyani Video</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

  • Pomoc

    5.8.2013 17:25:53 | Levan

    dobrý den, snažím se vložit video na stránky, ale nedaří se mi to. Přehrávač mi napíše že video nebylo nalezeno zápis vypadá takto:

    URL: http://vimeo.com/55414777

    <p></p>
    <a href="http://vimeo.com/55414777" style="display:block;width:700px;height:300px;" id="player"></a>
    <script src="/swf/flowplayer/flowplayer.min.js" type="text/javascript"></script>
    <script language="JavaScript">
    flowplayer("player", "/swf/flowplayer/flowplayer.swf", {clip: {autoPlay: false,}});
    // ]]></script>
    <p></p>

    Myslím, že to má něco společného s:
    - v Nastavení musí být .. "otevřít v prohlížeči"

    Nějak jsem ale nepochopil, kde to v nastavení najdu nebo spíš v jakém nastavení. Omlouvám se, ale jsem začátečník a budu moc rád za odpověď děkuji.

  • ispring video

    2.10.2012 15:56:32 | Josef

    Bohužel mi ani toto nefunguje k opakovanému přehrávání videa

  • RE: video

    2.10.2012 14:33:38 | Hana Medková

    Dobrý den, přes ikonu filmového pásu vkládáte videa ve flashi nahraná do administrace inPage, a v tom okně pro vkládání videa je funkce "Rozšířené" kde si nastavíte automatické přehrávání videa.

  • ispring video

    2.10.2012 12:40:12 | Josef

    Dobrý den, vytvořil jsem si video přes powerpoint a pak převedl pomocí ispring aplikace. chtěl jsem aby se video neustále opakovalo dokola ovšem nevím jak toho docílit, v poverpointu jsem nastavil nekonečnou prezentaci, ale video se nejeví jako nekonečné. Na webu http://www.vasesvatebnifotografka.cz má paní hned na úvodní stránce video, které je vytvořeno stejně a nekonečně se jí přehrává. Jak toho docílit? moje doména www.joseftrakal.cz .Děkuji za opdpověď

inPage.cz - webové stránky, doménawebhosting snadno.