Video na webových stránkách

24.8.2009 22:09 | Přečteno: 4405× | Normální život

Info úvodem: součástí tohoto zápisu je i jednoduché funkční HOW-TO.
Již dlouho se u nás v práci sem tam někdo ozval, že bychom mohli dát na naše webové stránky nějaké videoukázky z našich vystoupení, či DVD. Při představě nějakého šíleného flashe se mi z toho ale dělaly mžitky před očima a vehementně jsem se tomu bránil. Docela mi hrál do karet limit 300 MB na webhostingu. Doba ale pokročila, navýšily se limity, rychlosti, přišel flash 9 s možností přehrávat MP4 video a také přišlo HTML5 s tagem <video>. Takže jsem řekl „ano“ a začal zjišťovat, jak to udělat co nejlépe.

Jak na to?

V podstatě se nabízejí dva základní způsoby

1. použít nějaký flash přehrávač a do něj nacpat video v některém podporovaném formátu
2. použít tag <video>, který je momentálně funkční ve Firefoxu od verze 3.5 a v Safari od verze 4

Možnost "2" předpokládá, že mám video ve dvou formátech. Pro Firefox kontejner Ogg a v něm Theora+Vorbis, pro Safari kontejner MP4 a v něm (jiné možnosti jsem nezkoušel) MPEG-4 AVC (x264)/AAC. Dobrou zprávou je, že tohleto MP4 video lze nacpat i do flashového přehrávače. Z toho plyne, že budeme potřebovat celkem 2 videosoubory pro všechny možnosti.

Údajně funkční a validní řešení

Našel jsem dva dobře vypadající, údajně fungující připravené HTML skripty, které by měly fungovat tak, že otestují prohlížeč na podporu HTML5, a pokud vyjde test pozitivně, zvolí nativní přehrávání. V opačném případě zvolí flash. První byl čistě html (a z této stránky jsem hodně čerpal), druhý (už netuším, kde jsem ho našel) používal javascript. Výsledek dávaly oba stejný – a to ten, že v prohlížečích Midori a Arora jsem dostal místo videa jen náhradní obrázek…

a v Konqueroru 3.5.10 jen prázdné okno s ovládacími prvky. Řešení možná pěkné pro většinu obyvatelstva, ale rozhodně ne pro všechny.

Moje řešení

Zvolil jsem tedy řešení jiné. Výchozí video ve flashi a možnost přepnutí na nativní video. K tomu stačí umístit někam na stránky volbu, která uloží cookie s dobou platnosti na x let dopředu, a podle hodnoty této cookie volit dané zobrazení, což splní přesně svůj účel: v daném prohlížeči se bude používat nativní zobrazení videa, v ostatních prohlížečích (včetně těch se zakázanými cookies) „klasické“ flashové.

Zobrazení videa potom prakticky řeším tak, že si na místě jeho vložení nastavím proměnnou $filename (odpovídající názvu souboru bez koncovky) a dle hodnoty cookie vložím jeden ze skriptů:

První pro HTML5

<video poster="<?php echo $filename;?>.jpg"  width="360" height="270" autobuffer controls>
	<source src="<?php echo $filename;?>.mp4" type="video/mp4" /> <!-- MPEG4 for Safari -->
	<source src="<?php echo $filename;?>.ogv" type="video/ogg; codecs="theora, vorbis"" /> <!-- Ogg Theora for Firefox 3.5+ -->
</video>

Druhý pro flash

<div class="video">	
<object type="application/x-shockwave-flash" data="player.swf?image=<?php echo $filename;?>.jpg&file=<?php echo $filename;?>.mp4" width="360" height="290">
<param name="movie" value="player.swf?image=<?php echo  $filename;?>.jpg&file=<?php echo $filename;?>.mp4" />
 <param name="quality" value="high" />
 <param name="AllowFullscreen" value="true" />
 <param name='flashvars' value='bufferlength=10' />
 <img alt="Zde by mělo být video" src="<?php echo $filename;?>.jpg" width="360" height="270" />
 <p><strong>Váš prohlížeč nedokáže přehrát video.</strong>
			Nechcete si raději stáhnout soubor do PC?<br />
			<a href="<?php echo $filename;?>.mp4">MPEG4 / H.264 ".mp4" (Windows / Mac)</a> |
			<a href="<?php echo $filename;?>.ogv">Ogg Theora & Vorbis ".ogv" (Linux)</a>
		</p><p>
			Pro přehrávání videa zde na stránce udělejte, prosím, jedno z následujícího:
		</p><ul>
			<li>Aktualizujte na <a href="http://getfirefox.com">Firefox v3.5</a>,
				nebo <a href="http://apple.com/safari">Safari v4</a></li>
			<li>Nainstalujte <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a></li>
			<li>Nainstalujte <a href="http://apple.com/quicktime/download/">Apple QuickTime</a></li>
		</ul>
	</object>
</div>

U druhého je použit kontejner div jen proto, že ho tam chce validator. Uvedené skripty tiše předpokládají, že pro každé video máme 3 soubory stejného jména, ale odlišné koncovky. Jsou to 2 zmíněné soubory s videem a k tomu obrázek, který se zobrazí na počátku, než video začne přehrávat, nebo v případě, že prohlížeč přehrávání videa nepodporuje.

Jako flashový přehrávač jsem použil FW Player, který je pro nekomerční účely zdarma. Z něj postačí jen samotný soubor player.swf, ostatní soubory, ani doporučovaná řešení nejsou potřeba. Také si všmněte, že jsem výšku objektu s flashovým přehrávačem zvolil o 20 px vyšší, než samotné video - je to výška ovládacího panelu.

A abych nezapomněl – MP4 video vám v pohodě uloží Avidemux, na Ogg ho ladně převedete programem ffmpeg2theora.

A ještě další drobnost: pokud to nemá nastaven váš webserver, tak je potřeba do souboru .htaccess vložit následující

AddType video/ogg .ogv
AddType video/mp4 .mp4

Nečekané problémy

Všechno by fungovalo, až na drobný nedostatek. První nedostatek, který navíc nemám možnost odstranit, se projevuje při nativním přehrávání ve Firefoxu. Místo, aby se zobrazila délka videa a ukazatel běžel od začátku do konce, se délka nezobrazí, ukazatel skočí na konec a jen se zobrazuje uplynulý čas. Tento problém způsobuje webhostingový server Web4U.cz. Pokud video umístím fyzicky jinam, je vše v pořádku. Psal jsem jim, a odpovědí mi bylo „nakašli si“ – teda pardon, tohle mi nenapsali – napsali, že se mi omlouvají, ale že to tak prostě je…

Druhý problém byl podobného rázu u flashového přehrávače, kde se celkový čas sice zobrazil, ale bylo nutné čekat, až se stáhne celé video, což bylo značně nepříjemné. Nakonec se mi řešení podařilo nalézt – QTIndexSwapper AIR Application for Flash Player H.264 files – problém spočívá v tom, že se u H.264 ukládá index až na konec souboru. Na uvedené stránce je aplikace pro AdobeAIR, která tento index přešoupne na začátek souboru a vše potom funguje, jak má.

A to je vše. Snad tím někomu pomohu. Ohledně těch parametrů u flashe si nejsem jistý, jestli jsou tam všechny k něčemu, časem to ještě asi budu ladit k obrazu svému, každopádně to ale tak, jak to je, funguje. A pokud si myslíte, že to dělám úplně blbě, rád se v rámci diskuze přiučím
Ale jedna věc mi není jasná: proč se při přehrávání ve flashovém přehrávači „rozpatlávají“ například obličeje, když při přehrávání téhož souboru například ve VLC k tomuto nedochází. A ještě druhá věc – proč mi to v tagu video ignoruje parametr poster.

Můžete kouknout na testovací verzi

       

Komentáře

[petr_p]

Tolik povyku a kódu pro video. Jako by nestačil obyčejný odkaz.

Mně třeba vaše stránka nefunguje, protože mám přehrávač SWF, který tuhle „animaci“ nezvládne a přepnutí do podoby se značkou video nefunguje, protože mám zakázané koláčky. (Navíc vestavěný přehrávač Theory mám vypnutý, protože proti zásuvnému modulu, který volá mplayer nedokáže přehrát bez trhání ani video z domovské stránky Firefoxu.)

Rovněž náhradní text, který jsem našel v kódu stránky je poněkud divný – evokuje, že Theoru jen v Linuxu a MPEG-4 jen ve Windows nebo Macu. Dále tuna odkazů ma aktualizační stránky webových prohlížečů a zásuvných modulů je poněkud těžká.

Nakonec v zápisku zmiňovaný nástroj na výrobu Theory prokazuje medvědí službu, když vyrábíte jeden ztrátově komprimovaný formát z jiného ztrátově komprimovaného formátu.

[otula]

Tolik povyku a kódu pro video. Jako by nestačil obyčejný odkaz.

Odkaz kam? Všechna řešení, která jsem kde našel, byla horší - respektive tvrdila, že fungují všude, ale zrovna v mých oblíbených prohlížečích nefungovala vůbec. Když jsem zjišťoval, proč se mi ten flash průběžně nenahrává a nepřehrává, nikdo mi nedokázal správně odpovědět.

protože mám přehrávač SWF, který tuhle „animaci“ nezvládne

Ano, nechci používat žádné flv soubory, a jak jsem v blogu psal, je podpora H.264 ve flashi od verze 9. Tudíž každý, kdo má aktualizovaný systém, tak s tím problém nemá.

přepnutí do podoby se značkou video nefunguje, protože mám zakázané koláčky

Paranoia?

Rovněž náhradní text, který jsem našel v kódu stránky je poněkud divný – evokuje...

No jo, to jsem převzal z výše uvedené stránky - moc jsem to nerozebíral a neřešil - ale už jsem narazil víckrát na to, že mi "windowsáci" nadávali, co jsem jim to poslal (ogv), že to v ničem nepřehrají, takže to beru jako vodítko pro obyčejného uživatele, který neví, o co se jedná.

Nakonec v zápisku zmiňovaný nástroj na výrobu Theory prokazuje medvědí službu, když vyrábíte jeden ztrátově komprimovaný formát z jiného ztrátově komprimovaného formátu.

Ach jo. Snad jsou zdejší čtenáři natolik znalí, aby v případě požadavku na vyšší kvalitu použili něco jiného...

Chápu, že tenhle můj zápisek není zajímavý pro každého. Ale kdybych měl možnost si podobný zápisek přečíst před pár dny, ušetřilo by mi to spoustu času. Tak snad ho někdo ocení. A ten, kdo je v této problematice zběhlý, ho číst nemusí.

[petr_p]

Odkaz kam?

Normální element a. Nejlépe mimo objekt SWF, protože z něj se nedá bez studia zdrojáku ten video soubor najít.

Ano, nechci používat žádné flv soubory, a jak jsem v blogu psal, je podpora H.264 ve flashi od verze 9.

A co je to ten „flashový přehrávač“, který vytváří uživatelské rozhraní a který ze svých proprietárních parametrů získává adresu videa?

Tudíž každý, kdo má aktualizovaný systém, tak s tím problém nemá.

Přiznávám, že můj Gnash je o jednu verzi pozadu, ale SWF není jen Flash. Tudíž to není jen o tom, kdo má poslední verzi, ale taky jakou implementaci.

Znovu zopakuji, že v případě SWF neexistuje standardizovaná cesta, je se dobrat k adrese skutečného videa. Kdybyste použil normální vnořený objekt se smysluplným @data, tak problém nebude. Respektive bude jen s chybnými webovými prohlížeči, nikoliv s interpretací SWF.

Cením si vaší snahy dodat uživateli video moderními prostředky, ale zrovna způsob, jakým jste to udělal, je špatný.

[otula]

Normální element a

Aha, pochopil jsem význam té věty jinak. On se ten soubor (snad) zobrazí každému, kdo vůbec podporu videa v přehrávači nemá.

Tudíž to není jen o tom, kdo má poslední verzi, ale taky jakou implementaci.

Uznávám, že na podporu Gnash a dalších implementací jsem vůbec nemyslel, protože je nepoužívám, jelikož u mne vždy skončily fiaskem pro špatnou funkčnost (to mne samozřejmě neomlouvá). Kdybych dokázal nějak otestovat přítomnost flashe >=9, bylo by to bezva.

A co je to ten „flashový přehrávač“, který vytváří uživatelské rozhraní a který ze svých proprietárních parametrů získává adresu videa?

No jo, je tam právě kvůli těm ovládacím prvkům, ale video samotné je v „normálním formátu“. Vždy bych někomu vyliskal, když si stáhnu nějaké video do HW přehrávače, a on ho nedokáže přehrát (ale na druhou stranu, zase s tím nemají problém starší flashové přehrávače a patrně ani jiné implementace)

se nedá bez studia zdrojáku ten video soubor najít

No aspoň to mám tak, že se ten soubor dá snadno najít studiem zdrojáku ;) Na mnoha stránkách je to vědomě děláno tak, aby byl co největší problém ten soubor vypreparovat :)

Ale jinak: moc rád bych poskytnul odkaz každému, komu se video nepřehraje, ale problém je, že to všechno ošetřit nedokážu, a mít odkazy pod funkčními videi nechci. Ještě mne teď napadla eventuální možnost nastavit si (opět pomocí cookie to, že se člověku zobrazí jen obrázek+odkazy)

Kdybyste použil normální vnořený objekt se smysluplným @data, tak problém nebude.

Jak to myslíte?

Respektive bude jen s chybnými webovými prohlížeči, nikoliv s interpretací SWF.

A jaká je množina těchto chybných prohlížečů?

Cením si vaší snahy dodat uživateli video moderními prostředky, ale zrovna způsob, jakým jste to udělal, je špatný.

Děkuji za uznání i za kritiku. Tento blog jsem napsal jednak proto, abych ukázal ostatním některé nástrahy, a mimo jiné i proto, abych se dozvěděl, že třeba existuje lepší řešení - pokud by fungovalo při použití pouze těchto dvou formátů videa.

A jinak tedy: z tagu <object> jsem trochu magor. Bývají vloženy do sebe, naskládaných milion parametrů, které se různě dublují, na stejné věci se odkazuje různými parametry, a absolutně mi uniká, co se z toho kdy vlastně při zobrazení stránky použije. Přitom je jinak HTML tak strašně přehledné a jednoduché.

[otula]

Do ukázky jsem na ukázku doplnil možnost přepnout na zobrazení náhledu + odkazů. A ještě zvažuji možnost, že by tohleto bylo výchozí a součástí by byl i "přepínač", nebo odkaz na stránku, kde by člověk rovnou viděl, co jeho prohlížeč podporuje + nějaké info + možnost výběru zobrazování (v mém konkrétním případě stránka s nápovědou). Možná by to bylo nejohleduplnější řešení. Otázka je, co na to zodpovědní pracovníci, a také otázka, zda je to řešení, které by návštěvníci webu chtěli.

[Jendа]

Detekuj user-agent, IE Flash, Firefoxu a Safari (jak je na tom Opera?) <video>, ostatním odkaz.

(A co třeba linuxákům rovnou odkaz? Dá se předpokládat, že ho budou chtít nejvíc :-P)

[otula]

IE Flash, Firefoxu a Safari (jak je na tom Opera?) <video>, ostatním odkaz.

Takhle narazím na stejný problém - verze flashe. Tu bych hlavně potřeboval otestovat. Opera <video> neumí.

[Jardík]

<video> nepoužívat vůbec, jeho použití není validní a to, že někdy bude součástí standardu to neomlouvá. Psát nevalidní stránky je špatné.

[Ladicek]

Jardo, i W3C validátor už prej umí validovat HTML 5 (nezkoušel jsem), tak co meleš o nevaliditě? Výraz být validní má smysl jen s uvedením schématu. <video> je validní HMTL 5 a basta. Mimochodem CSS 2.1 taky pořád není "standard" (W3C Recommendation), je jeho použití špatné?

[Jardík]

HTML5 už byl schválen?

[Ladicek]

Ne. CSS 2.1 taky ne, a přesto se obojí používá a obojí lze validovat. Překvapení!

[Jardík]

Když to říká Ladicek, tak to musí být pravda.

[Ladicek]

Správně! Vidím, že už se orientuješ Mimochodem, pokud ti jde o opravdové standardy, pak snad jedině ISO/IEC 15445:2000 zvané též ISO HTML 2000, doporučení W3C přece za standardy považovat nemůžeme

[petr_p]

Uznávám, že na podporu Gnash a dalších implementací jsem vůbec nemyslel, protože je nepoužívám, jelikož u mne vždy skončily fiaskem pro špatnou funkčnost (to mne samozřejmě neomlouvá). Kdybych dokázal nějak otestovat přítomnost flashe >=9, bylo by to bezva.

S tím vám neporadím. SWF soubor obsahuje na začátku číslo verze jazyka. Interpret asi taky má javascriptové rozhraní, jak z něj vytáhnout, které verze umí. Problém je, že třeba Gnash umí celý SWF 7 a z vyšších verzí jen něco.

No jo, je tam právě kvůli těm ovládacím prvkům, ale video samotné je v „normálním formátu“.

Ale to je na nic, když se uživatel přes rozbitý přehrávač k normálnímu videu nedostane.

mít odkazy pod funkčními videi nechci.

Hlavně že tam teď máte odkaz na koláčkové přepínadlo. Osobně na přímém odkazu na skutečný video soubor nevidím nic nadbytečného. Obzvláště v době, kdy řešíme nefunkční přehrávání videa webovým prohlížečem. Naopak bych to viděl jako přínos uživatelům, že si video mohou snadno uložit. Prostě samá pozitiva a jistoty.

Kdybyste použil normální vnořený objekt se smysluplným @data, tak problém nebude.

Jak to myslíte?

<object data="video.mp4" type="video/mp4">
  <object data="video.ogv" type="video/ogg">
    <p>Video ve formátu
     <a href="video.mp4">MPEG-4/AVC</a> nebo
     <a href="video.ogv">Ogg/Theora</a></p>
  </object>
</object>

Tohle bude fungovat i tam, kde element video neznají. Jediný podstatný rozdíl s video je ten, že video má standardizované javascriptové API. Ale pokud nepotřebujete dělat interaktivní prezentace, tak object zcela stačí.

A jaká je množina těchto chybných prohlížečů?

{IE}

A jinak tedy: z tagu <object> jsem trochu magor. Bývají vloženy do sebe, naskládaných milion parametrů, které se různě dublují, na stejné věci se odkazuje různými parametry, a absolutně mi uniká, co se z toho kdy vlastně při zobrazení stránky použije. Přitom je jinak HTML tak strašně přehledné a jednoduché.

To je všechno kvůli IE. Jinak stačí velmi jednoduchý kód, který jsem uvedl. Ve specifikaci HTML element embed není a element applet je označen za zastaralý.

[otula]

Ale to je na nic, když se uživatel přes rozbitý přehrávač k normálnímu videu nedostane.

No jo, s tím jsem na začátku nějak nepočítal - respektive - neotestoval jsem to dostatečně ve všech možných kombinacích prohlížečů/flash. Jak to vypadá ve flash 8 jsem viděl až po zveřejnění zápisku - je to nepříjemný "detail".

<object data="video.mp4" type="video/mp4">

Aha, takže jako náhrada tagu video - myslel jsem, že je to myšleno jako náhrada toho flashe. Ale nepřišel jsem na to, jak ho mít 1:1 - je docela maličké. Parametr width tam nefunguje.

Hlavně že tam teď máte odkaz na koláčkové přepínadlo.

To je jen testovací forma. V ostré verzi samozřejmě u videa žádné přepínadlo nebude. To umístím na úplně jinou stránku. :)

{IE}

To je dost velká množina O to větší, že to není odborný web o Linuxu, ale stránky, kam chodí obrovské procento těchto uživatelů.

[petr_p]

Aha, takže jako náhrada tagu video - myslel jsem, že je to myšleno jako náhrada toho flashe.

Nejen náhrada elementu video, ale i náhrada SWF objectu. Prostě žádný SWF, žádné video. Vše je čistě deklarativní zápis, z kterého si webový prohlížeč vybere, co umí.

Ale nepřišel jsem na to, jak ho mít 1:1 - je docela maličké. Parametr width tam nefunguje.

Funguje. Jen specifikace je trochu tajemná a třeba v Mozille si ji vykládají tak, že implicitně je rozměr 320 × 200. Avšak existuje i výklad, že velikost si určí zásuvný modul. Každopádně když uvedete šířku i výšku (což je dobré i pro to, aby se nepřeskládávala stránka v průběhu načítání), tak by se měla taková použít.

[otula]

i náhrada SWF objectu. Prostě žádný SWF, žádné video. Vše je čistě deklarativní zápis, z kterého si webový prohlížeč vybere, co umí.

No ale když jsem to zkoušel, tak jediné, co fungovalo, tak bylo video ve Firefoxu, stejné, jako při použití video tagu. Jinak to nejelo v ničem (Safari jsem nezkoušel)

Každopádně když uvedete šířku i výšku

Firefox velikosti ignoruje, Opera, IE, Arora, Midori, Chrome to nepřehrají vůbec. Jediné, kde to funguje správně, je Konqueror - ale bez ovládacích prvků, kvůli kterým používám ten flash (jinak bych se na něj vykašlal) - za tohle bych asi pochvalu nesklidil ("A proč nám to nejede, když to všude jinde funguje?" "Protože jsem použil správný zápis a je to chyba prohlížečů…" - to by mi asi neprošlo )

[petr_p]

Asi máme jiné webové prohlížeče. Mně Firefox-3.5.2 @width a @height respektuje. A ovládací prvky tam budete mít takové, jaké vám tam nakreslí váš přehrávač.

[otula]

Mně opravdu ne (přitom u tagu video velikosti respektuje). A aby to nebylo málo, tak 3.6alpha mi v tomto případě nezobrazil vůbec nic :)

[Grunt]

Firefox velikosti ignoruje, Opera, IE, Arora, Midori, Chrome to nepřehrají vůbec. Jediné, kde to funguje správně, je Konqueror - ale bez ovládacích prvků, kvůli kterým používám ten flash (jinak bych se na něj vykašlal) - za tohle bych asi pochvalu nesklidil ("A proč nám to nejede, když to všude jinde funguje?" "Protože jsem použil správný zápis a je to chyba prohlížečů…" - to by mi asi neprošlo )

Hele, já už vím, že s tím budu asi pěkně trapný, ale nedá mi to abych (snad už naposled) upozornil na Cortado.

[otula]

To vypadá docela zajímavě (i když jsem při zkoušce jejich dema měl po 5 minutách stále černou obrazovku - ale mám tady dost pomalé připojení, tak je to možná tím)

[Amarok]

A neni to spis tou Javou? Teda jako jestli je to odzkouseno v linuxu v kazde Java implementaci. Nekompletni Java jako IcedTea dost castou vse nesvede...

[Grunt]

Těžko říct, ale mně to jede.

[AHAHA]

Ja bych to dal na youtube

[Jendа]

Já třeba nerad 3rd party věci, nad kterými nemám žádnou kontrolu...

[AHAHA]

Ja taky, ale pokud potrebuju uploadnout nejakou hloupost, nemam v planu dve hodiny resit, jak to udelat validne a zaroven tak, aby to fungovalo vsem ...

[Jendа]

YouTube funguje jen lidem s Flashem. Ostatní si stejně musí nainstalovat nějaké rozšíření typu UnPlug, aby se jim to přehrálo.

[AHAHA]

Jo, jenze lidi, co se chcou divat na video maji flash plugin nainstalovany.

[Jendа]

Video ve Flashi se mi seká...

Jo a taky - co když si někdy koupím něco ARMem

[genius2000.log]

Takže jenom 98% :)

[Grunt]

Myslím si, že tento zápisek pouze ukazuje jak je dnešní situaci s videm na webu zoufalá a pouze ukazuje tu příšernou neschopnost se dohodnout. Jinak bych spíš doporučoval postup dle Wikimedie. Tedy <video>, Cortado(Java), <object>. Má jen jedinou vadu na kráse: Theoru.

[Grunt]

Jinak bych spíš doporučoval postup dle Wikimedie

Snad se mi podařilo najít i zdroják. Dokonce k tomu mají i fešnou nápovědu pro uživatele. Určitě doporučuji alespoň zkusit. Jen by bylo vhodné fallback obrázek obohatit o <a href…

[Ondrej 'SanTiago' Zajicek]

> Myslím si, že tento zápisek pouze ukazuje jak je dnešní situaci s videm na webu zoufalá

Myslim, ze pouziti odkazu (tag A) je uplne idealni. To akorat nekteri webdesigneri touzi mit video embeddovane ve webove strance, ackoliv pro uzivatele to prinasi akorat komplikace (neobvykle ovladani, problematicky fullscreen a stahnuti videa).

[Grunt]

Myslim, ze pouziti odkazu (tag A) je uplne idealni.

A neříkalo se o IMG to samé?

[MaFy]

Myslíš, že zápisek je to super. Ale je hrozné, že video, něco tak hojně využívaného, je stále tak špatně podporováno. Já osobně, dokud nebude plně validní něco kloudného a funkčního ve všem, vše dávám na YouTube a pak "object" to jistí.

MaFy

[otula]

YouTube jsem se chtěl vyhnout :)

[Grunt]

Sohlas. Z YouTubu jakožto embeded videa už mi vstávají vlasy hrůzou.

[Ondřej Profant]

 V prvé řadě bych rád autorovi poděkoval za přijemný návod / zápisek. A vyjádřil bych mu podporu, zatímco někteří diskutující by mohli občas přestat remcat, protože je to opravdu nevděčné.

 

Ve FireFoxu 3.5.3 mi to video jede velmi hezky (když jsem aktualizoval na 3.5.0, tak se ještě ukázkové video přímo od Mozzily docela trhalo). Jinak moc pěkné video :).

[otula]

Díky :)

[Grunt]

Všechno by fungovalo, až na drobný nedostatek. První nedostatek, který navíc nemám možnost odstranit, se projevuje při nativním přehrávání ve Firefoxu. Místo, aby se zobrazila délka videa a ukazatel běžel od začátku do konce, se délka nezobrazí, ukazatel skočí na konec a jen se zobrazuje uplynulý čas. Tento problém způsobuje webhostingový server Web4U.cz. Pokud video umístím fyzicky jinam, je vše v pořádku. Psal jsem jim, a odpovědí mi bylo „nakašli si“ – teda pardon, tohle mi nenapsali – napsali, že se mi omlouvají, ale že to tak prostě je…

ROFL, tak to je teda fakt nepřekonatelný problém:

$ telnet otakar.ic.cz 80
Trying 88.86.103.242...
Connected to otakar.ic.cz.
Escape character is '^]'.
HEAD /video/hudebni.ogv HTTP/1.1
Host:otakar.ic.cz

HTTP/1.1 200 OK
Date: Mon, 24 Aug 2009 22:22:42 GMT
Server: Apache/2.2.3 (Debian) PHP/5.2.0-8+etch10 mod_ssl/2.2.3 OpenSSL/0.9.8c mod_perl/2.0.2 Perl/v5.8.8
Last-Modified: Mon, 24 Aug 2009 19:32:22 GMT
ETag: "2614bfe9-e802c5-471e846dbbd80"
Accept-Ranges: bytes
Content-Length: 15205061
Content-Type: video/ogg
TEST-test: text/html; charset=ISO-8859-2
Connection: close

Connection closed by foreign host.

$ telnet vusondras.cz 80
Trying 81.91.86.10...
Connected to vusondras.cz.
Escape character is '^]'.
HEAD /video/hudebni.ogv HTTP/1.1
Host:vusondras.cz

HTTP/1.1 200 OK
Date: Mon, 24 Aug 2009 22:21:24 GMT
Server: Apache/2.0.63 (Unix) PHP/4.4.8 mod_ddmh/0.0.14
Last-Modified: Mon, 24 Aug 2009 17:09:10 GMT
ETag: "31ba493-e802c5-46bc3980"
Content-Length: 15205061
Connection: close
Content-Type: video/ogg

Connection closed by foreign host.

Ale jedna věc mi není jasná: proč se při přehrávání ve flashovém přehrávači „rozpatlávají“ například obličeje, když při přehrávání téhož souboru například ve VLC k tomuto nedochází.

Ono to vypadá jako by flashová verze ignorovala(snad z výkonostních důvodů) některé části videa. Snad vybrané AC koeficienty v residual framech nebo co.

[otula]

ROFL, tak to je teda fakt nepřekonatelný problém:

Jak to myslíš?

[Grunt]

Že oni sice odešlou délku videa, ale už k tomu zapomněli dodat hlavičku, která by blíže specifikovala v jakých jednotkách(Či ať jsem přesnější, v jakých jednotkách si přejí seekovat).

[otula]

Pořád mi to tak nějak uniká - mohu já nějak tuto chybu ovlivnit, nebo to musí udělat správce serveru?

[Grunt]

Samozřejmě, nejlepší by bylo kdyby si to správce serveru opravil. Teoreticky by to jít mohlo pomocí PHP, které dovoluje vkládat hlavičky do odpovědí v případě, že to na serveru je povoleno.

[otula]

No, a tady je právě ten pro mne nepřekonatelný problém - správce serveru jen zkonstatoval, že to tak prostě je, a tím pro něj problém skončil. A druhá, teoretická, možnost je trochu mimo mé znalosti. :(

[Grunt]

No, a tady je právě ten pro mne nepřekonatelný problém - správce serveru jen zkonstatoval, že to tak prostě je, a tím pro něj problém skončil.

A to jde o nějaký veřejný nebo soukromý WebHosting? V případě, že veřejný se klidně můžeš rovnou pustit do veřejného pomlouvání.

A druhá, teoretická, možnost je trochu mimo mé znalosti.

Nevím jak v jiných jazycích, ale v PHP by šlo využít, na začátku ještě před přenosem, funkce Header("Accept-Ranges: bytes");. (Samozřejmě v případě, že je to na serveru povoleno) Jen jsem si teď uvědomil, že nejde o stránku ale o binární soubor, takže by to asi také nebylo zrovna jednoduché.

[otula]

V případě, že veřejný se klidně můžeš rovnou pustit do veřejného pomlouvání.

Viz reakci Luboše úplně na konci - výhledově to vypadá pozitivně, takže bych nerad zbytečně moc pomlouval. :)

[Limoto]

Já jsem si dlouho myslel, že Arora <video> nepodporuje, protože když jsem to poprvé zkoušel, tak jsem nenašel žádnou stránku, která by mi na základě bezchybné detekce nenacpala flash. Až později jsem zjistil, že to funguje už od Qt 4.5...

[Grunt]

Abych pravdu řekl, tak už nějakou chvíli znám pouze jediný prohlížeč(či spíše jádro), který má s tagem <video> problém. A hádat můžete třikrát.

[Limoto]

Třikrát? Tolik možností není

[Jendа]

Gecko? WebKit? Presto? Tkhtml3? A jó, Trident!

[otula]

Já jsem si dlouho myslel, že Arora <video> nepodporuje, protože když jsem to poprvé zkoušel, tak jsem nenašel žádnou stránku, která by mi na základě bezchybné detekce nenacpala flash. Až později jsem zjistil, že to funguje už od Qt 4.5...

Qt 4.5 mám, a dělá mi to právě to, co jsem popsal v zápisku. Takže na základě detekce skončím bez videa, jen s náhradním obrázkem, protože si Arora myslí, že to umí, a pak nic nepřehraje (ale netvrdím, že to musí dělat každému)

Když jsem narazil na výše odkazovaný článek o vkládání videa na základě detekce, koukal jsem na to v Konqueroru a unikalo mi, proč je na prvním obrázku jakýsi bílý obdélník s ovládacími prvky. Tak jsem na to kouknul v Aroře, abych zjistil, že tam najednou mám obrázek. Ta jsem kouknul do zdrojáků, aby mi docvaklo, že bych tam měl vidět video ;)

[Jendа]

1) Navrhuji odkaz "video si stáhněte zde" - třeba pro mě nejpřijatelnější .

2) Ještě zkus tag object - jsou lidé bez podpory tagu video, ale mají plugin, který nemá problém přehrát cokoliv.

3) Ano, situace je zoufalá, já to řeším odkazem. Bohužel je zase problém v tom, že BFU třeba ani nemá žádný dekodér H.264

[otula]

Navrhuji odkaz "video si stáhněte zde" - třeba pro mě nejpřijatelnější

Ten "by se měl" zobrazit, pokud prohlížeč nemá žádnou podporu videa. Nevím ale jak například otestovat, že má někdo starou verzi flashe.

Ještě zkus tag object - jsou lidé bez podpory tagu video, ale mají plugin, který nemá problém přehrát cokoliv.

Kam ho ještě přidat?

[Jendа]

Kam ho ještě přidat?

To nevím . Napadlo mě to, že ho používá docela dost webů (hlavně televize) a očividně s tím problémy nejsou (to by přešli na Flash - fuj). A Windows Media Player Plugin (nebo jak se to jmenuje na oknech) má snad každý.

Teď ještě zjistit, jaké formáty umí WMP, pokud si uživatel nenainstaluje dodatečné dekodéry. IMHO by měl MPEG-4 Part 2 ASP a zvuk v mp3 nebo aac, možná i MPEG-4 Part 10 AVC. Kontejner bohužel asi jenom AVI . (už jsem si o tom něco přečetl, takže jsem to snad napsal dobře :-P)

[otula]

Tak zrovna já mám s některými online televizemi hodně velké problémy Jinak tag <object> používám u té flash verze - ta funguje bez problémů, pokud má člověk dostatečně novou verzi flashe.

WMP néééé. To nechci :) Spíš se zkusím porozhlédnout po webu, jestli někde najdu, jak otestovat verzi flashe. Určitě to jde, protože už jsem na to víckrát narazil.

[Jendа]

Tak zrovna já mám s některými online televizemi hodně velké problémy

U ČT jsem potřeboval oficiální RealPlayer, ale pak dodělali do mplayeru nebo VLC (už nevím) podporu pro seekování, takže ten WMV stream mi v pohodě chodí. U bývalého Nova-archivu a podobných mi vždy stačilo nainstalovat VLC nebo MPlayer plugin pro Mozillu.

WMP néééé. To nechci :)

Když dáš tag object, tak se spustí to, co má klient nastaveno jako výchozí - u většiny oknařů WMP. Ale tobě může být celkem jedno, co za přehrávač to je - hlavně, když ti to přehraje video.

Spíš se zkusím porozhlédnout po webu, jestli někde najdu, jak otestovat verzi flashe. Určitě to jde, protože už jsem na to víckrát narazil.

Má to třeba jůtjůb. Inspiruj se

[otula]

No jo, k tomu WMP bych musel ale dělat ještě další video.

A test už mám, i když v javascriptu, tak to budu muset nějak smontovat dohromady s PHP: test verze

[Jendа]

No jo, k tomu WMP bych musel ale dělat ještě další video.

IMHO by WMP měl přehrát MPEG-4 Part 2 ASP...

[otula]

Takže jak říkám - další video. Používám totiž MPEG-4 AVC :)

[Jendа]

Možná to přehraje, nezkoušel jsem

(to fakt tolik Windowsáků nemá žádný z těch jejich "codec packů"? já tedy automaticky instaluji VLC...)

[otula]

já tedy automaticky instaluji VLC

No jo, ale ty nejsi typický "windowsák"

[Kvakor]

Standardní skript AC_RunActiveContent.js, co Adobe dává ke vygenerovanému Flashi (pokud je cíl HTML stránka), obsahuje i detekci verze. Jde najít na spoustě stránek, co obsahují Flash.

[otula]

Našel jsem trochu jiný js, už jsem to o pár příspěvků výše odkazoval. A jak jsem psal, teď už jen ten js nějak skloubit s PHP.

[petr_p]

WMP néééé. To nechci :)

Jinak řečeno vím lépe než ty, co chceš. Ne, tohle je právě ten špatný přístup.

[otula]

Jednak to vůbec není můj oblíbený formát, a navíc by to znamenalo třetí videosoubor. To už bych to zrovna mohl převádět na nějaký ten SWF, kompatibilní se staršími verzemi flashe.

[petr_p]

WMP není formát, ale přehrávač. To je jaksi záležitost uživatele, jestli mu tento přehrávač vyhovuje, ne autora videa. A to odpovídá i na poznámku se třetím souborem – pokud tento přehrávač neumí přehrát tento formát, tak jej stačí vyměnit za jiný přehrávač. Vás to nemusí nijak vzrušovat.

[otula]

No jo, já vím, že je to přehrávač. Ale uznávám, že jsem si to i v hlavě trochu spojil s formátem wmv (respektive s kontejnerem asf, který často bývá koncovkou wmv označen).

Teď trochu přeskočím z tohoto tématu: zkusil jsem udělat jisté řešení, mně zatím funguje všude. Můžete vyzkoušet tu mou testovací stránku ve vašich prohlížečích. Nezkoušel jsem to s gnash, ale mělo by zobrazit flashové video pouze pro flash 9 a vyšší. Pro starší verze nebo vypnuté cookies to nabídne poster+odkazy. A samozřejmě zůstává možnost ručně přepnout na tag video.

[petr_p]

Takhle to je i s Gnashem použitelné: obrázek a pod ním text s odkazy na videosoubory.

Nesouvisející chyba: zrušte barvu pozadí u třídy novideo, nebo naopak nastavte i barvu popředí (textu a odkazů). Mám neobvyklé implicitní barvy, což ve vaší ukázce vede na bílý text na bílém pozadí.

[otula]

Bezva, díky.

Tak jsem tam hodil černé popředí, ale ono je to stejně nepodstatné, na ostro to bude sladěno s použitým stylem stránek.

Včera jsem se vrátil někdy kolem 22.30 domů (Jana v práci, děti u babičky) a do 3 do rána jsem řešil, jak přes AJAX (který mi stejně jako javascript vůbec nic neříká) dostat verzi flashe z javascriptu zpět na server do PHP a promítnout to do stránky. Nakonec jsem to až dnes ráno vyřešil tak, že už z toho javascriptu uložím cookie a AJAX využiju jen pro "znovuzobrazení" stránky. To je takových věcí, co by se člověku hodilo umět…

[Luboš Doležel (Doli)]

Tento problém způsobuje webhostingový server Web4U.cz. Pokud video umístím fyzicky jinam, je vše v pořádku. Psal jsem jim, a odpovědí mi bylo „nakašli si“ – teda pardon, tohle mi nenapsali – napsali, že se mi omlouvají, ale že to tak prostě je…

Na tenhle příspěvek prosím neodkazuj, asi bych to sem neměl psát. Problém je v jednom patchi, co tam na Apachi je. Při příštích updatech to bude OK, musí se překompilovat Apache na všech serverech clusteru (s rozličnými distribucemi).

[otula]

Na tenhle příspěvek prosím neodkazuj

Pokud myslíš při komunikaci s Web4U, tak to jsem na tento blog neodkazoval.

Při příštích updatech to bude OK, musí se překompilovat Apache na všech serverech clusteru (s rozličnými distribucemi).

Mockrát děkuji za pozitivní informaci, viděl jsem to docela černě. A pokud bys chtěl, abych to z blogu odstranil, abych jim nedělal negativní reklamu, klidně to smáznu.

[Luboš Doležel (Doli)]

A pokud bys chtěl, abych to z blogu odstranil, abych jim nedělal negativní reklamu, klidně to smáznu.

Mně to nevadí

[otula]

[otasomil]

Proc se s tim budete drbat.

Nahrajte na vas firemni server video jako soubor a dejte jen do stranky link.

Kazdy kdo chce tak si to stahne a prehraje v prehravaci jakem chce.

Pamatujte: V jednoduchosti je sila....

[otula]

Pokud bych pominul, že požadavek byl trochu jiný, tak ono někdy může být praktičtější jen nakouknout a nemuset stahovat celý soubor.

[Jendа]

Dokonce i WMP umí přehrávat ze síťového umístění aniž by musel stahovat celý soubor

[Limoto]

AFAIK jenom ze samby

[Grunt]

V tom případě víš špatně.

[Amarok]

Nevi nekdo, jak je to s tagem <video> v XHTML? Sice tady autor clanku to ma v xhtml 1.0 strict, ale dival jsem se ted na specifikaci, a je to jen v html 5, nikoliv v xhtml 2.0, cili to v xhtml funguje jen diky toleranci prohlizecu a autori specifikace neplanuji video oficialne pro xhtml?

[Ladicek]

XHTML 5?

[Amarok]

Tak toho se podle me nedockame, to driv bude ZHTML 1.0 :)

[Ladicek]

Čistě pro info – XHTML 5 je XML formát pro HTML 5.

[Amarok]

A to se pise kde? Koukal jsem teda jen na wikipedii (a kratce na w3c), ale tam je to podle me dost aktualni.
Nemuzou prece z xhtml 1.1 a pripravovane verze xhtml 2.0 najednou skocit na xhtml 5.

[Amarok]

Aha, uz jsem xhtml 5 nasel, to je ale jaksi odnoz od html 5, neni to nasledovnik xhtml 2.0. Otazka tedy zustava, co s "pravym" xhtml, to nejak zanikne?

[Ladicek]

Ne, to už zaniklo. Jako že pracovní skupina pro XHTML 2 u W3C byla rozpuštěna.

[Amarok]

Aha, dalsi nasledek financni krize
Dik za info.