Komentáře k článku

Webdesignérův průvodce po HTML5 – pohyblivé obrázky

V minulých týdnech jsme si povídali o tom, jak smysluplně označovat obsah stránek. Ale abychom vůbec mohli nějaký obsah označovat, musíme nějaký (nejlépe hodnotný) mít. Blogy (a psaní) už jsou z módy a tak musíme, chceme-li být in, natáčet a publikovat audio a video. Ovšem pro publikaci tohoto typu obsahu jsme donedávna potřebovali plugin v prohlížeči. Dnes se podíváme, jak kartami míchá HTML5, a na nový element <video>.

Zpět na článek

28 komentářů k článku Webdesignérův průvodce po HTML5 – pohyblivé obrázky:

  1. mmmmario

    Ukázka kódu

    V ukázce HTML kódy by měly být atributy v uvozovkách, nebo to HTML5 povoluje i bez uvozovek?

    formát/kodek podle mě (kdyžtak mě opravte): formát je třeba H.264, který popisuje jak skládat snímky za sebe, jak využívat předchozí/budoucí snímky pro kompresi „je jen jeden“ a kodek je sw, který to dělá – komprimuje či dekomprimuje video, každý si může implementovat svůj třeba x264, ffmpeg apod. „je jich více“

    1. Martin Malý

      Re: Ukázka kódu

      HTML povoluje atributy bez uvozovek, alespoň co vím.
      S kodekem/formátem je to trošku nepřehledné. „Formát videa“ může označovat jak „formát videosouboru“ (mov, avi, …), tak i „kompresní formát“ (MPEG2, MPEG4 apod.), ale rozhodně častější je první význam. „Kodek“ zase může označovat jak algoritmus (MPEG), tak jeho konkrétní implementaci (ffmpeg). V článku je „formátem videa“ míněn formát videosouboru (tedy např. AVI nebo FLV) – vzhledem k tomu, že tyto formáty jsou obecné kontejnery a mohou obsahovat video i audio kódované různými algoritmy, a bylo zapotřebí odlišit, o jaký typ kontejneru jde. Je to konzistentní s označením „formát souboru .doc“ nebo „formát pdf“, „formát ZIP“. (Ostatně i ZIP může využít několik různých algoritmů, a používá se „soubor ve formátu ZIP“, nikoli „…ve formátu lzh v souboru typu ZIP“)
      Vlastní algoritmy jsou označovány i slovem „kodek“ – tedy výraz „použitý kodek: H.264“ ve skutečnosti znamená „videostopa byla komprimována algoritmem H.264 pomocí nějakého kodeku (přesněji enkodéru), který tento algoritmus implementuje“. Slovo „kodek“ tedy vyjadřuje nejen konkrétní implementaci, ale přeneslo svůj význam i na vlastní algoritmus – byť je to nepřesné.
      Podobně říkáme, že audiostopa byla zkomprimována MP3 kodekem, a myslíme tím „MP3 algoritmus implementovaný v nějakém kodeku“, aniž bychom specifikovali, jestli šlo o Fraunhofer MP3 codec nebo LAME. Prostě „nějaký MP3 kodek“.
      Zvažoval jsem, zda ponechat nepřesné, ale vžité vyjádření, které je bližší webdesignérům (a které se používá v mnohých programech pro tvorbu videa), nebo zda se držet striktního výkladu „typ multimediálního kontejneru – kompresní algoritmus – kodek“, ale verze, kterou zvolil autor, mi nakonec připadala pro cílovou skupinu pochopitelnější a bližší intuitivnímu chápání („typ kontejneru“ nepochopil nikdo, ale na „formát videa“ řekli: „Jasně, AVI“).
      Takže asi tak. Omluvte prosím tuto terminologickou nepřesnost v praktickém článku pro webdesignéry; až bude článek o videu pro programátory, bude se to v něm hemžit kontejnery, kompresními algoritmy a kodeky…

      1. Jan SládekAutor příspěvku

        Re: Ukázka kódu

        Martine, díky za ujasnění pojmů. :)
        Jinak HTML5 skutečně umožňuje používat atributy hodně volně, třeba právě tak, jak je to u příkladu s tagem video.
        … src=hixiebojuje.ogv controls …
        To samé by se v XHTML (XHTML5) zapsalo takhle:
        … src=„hixieboju­je.ogv“ controls=„controls“ …
        Každý si musí rozhodnout sám, jak mu to vyhovuje. Osobně mi asi nejvíce sedí uvádět boolean atributy samotné (controls) a ty, které se vyplňují (src) dávat uvozovky.

  2. Martin Hložek

    WebM v Opeře

    Dovolil bych si jen poznámku k poslednímu seznamu „Přehled podpory jednotlivých formátů“. Včera vyšel nový test build Opery 10.6 (http://jdem.cz/fjjd9) a obsahuje už také podporu WebM formátu.

  3. Radek Hulán

    degradace a praxe

    „A pro prohlížeče, které nepodporují [video], můžeme degradovat na flashový přehrávač. Dokonce již existují pěkné pluginy např. pro jQuery“ — to bude v praxi fungovat spíše opačně. Flash je „průmyslový standard“, používá jej cca 99% lidí, kodeky jsou u něj vyjasněné, akcelerace pomocí GPU funguje, vývojové nástroje také, stejně tak streaming tohoto videa. O další funkčnosti HTML5 / JS vs Flash není třeba psát, tam je Flash jasně lepší.
    V praxi tedy stačí nabídnout Flash, a pokud jej dané zařízení nepodporuje (specifický případ iPad, iPhone), tak degradovat na HTML5 video – konkrétně H.264+ACC (MP4).
    Offtopic PS: článku by prospělo, kdyby upustil od těch rozjařených hodnodících výrazů na nezralou technologii a zabýval se jen popisem ;)

    1. pas

      Re: degradace a praxe

      No… :) ani já, jako velký příznivce Flashe, bych si netipnul, že Flash zůstane navěky používán na video. Jde-li o primitivní obdélníček s videem, není důvod nepoužít HTML tag video (samozřejmě ne hned, ale až se to v budoucnu stabilizuje). Stejně jako nepoužijeme Flash pro statický obrázek, přestože to taky jde. Flash se hodí pro streamování, pro přenos obrazu z kamery, pro následné zpracování videoobrazu (filtry, transformace…), pro kreativní ovládací prvky, maskování, práci s metadaty, atd. atd… (zvláště, když také bude podporovat VP8).
      Mimochodem, asi to Zdrojákem neproběhlo, ale nedávno byl uvolněn Open Source Media Framework pro flashové video:
      http://osmf.org/
      Prostě, řečeno s Adobe – we love choice. :)

      1. Radek Hulán

        Re: degradace a praxe

        „Flash zůstane navěky používán na video“ – to jsem přece nepsal :) Píšu o realitě dneška, a tou je Flash, plus jeho případná degradace na HTML5 pro zařízení, co jej nemají (Apple).

    2. aichi

      Re: degradace a praxe

      Navíc firmy cpou do videa reklamy, před, za, při přehrávání chtějí posílat na server, že se přehrává, atd. a to se zatím se značkou VIDEO dělat nedá. Proto zatím flash vítězí.

    3. Martin Malý

      Re: degradace a praxe

      Pláčeš na špatném hrobě: „Degradation“, česky (ne)překládáno jako „degradace“, je ve webdesignu technický pojem, nikoli hodnotící. Když na novou technologii (třeba CSS3) není některé zařízení připraveno, a je mu nabídnuta „starší alternativa“, nazýváme tento postup „degradací“. K ujasnění významu pojmu „degradation“ ve webdesignu doporučuji též http://zdrojak.root.cz/clanky/graceful-degradation-vs-progressive-enhancement/
      Jen k tomu PS, Radku: „Rozjařené hodnotící výrazy“ v textu vidíš přesně kde (když už máme jasno v té degradaci)?

      1. pas

        Re: degradace a praxe

        To je samozřejmě pravda, ale jen bych u těch alternativ místo „starší a novější“ použil spíš „horší a lepší“, „přirozená a … ohackovaná :)“, apod. To se může lišit případ od případu. V oblasti (obyčejného) videa souhlasím, že asi bude degradace tím směrem, jak popisuje článek, protože přehrávání v HTML je přirozenější. V oblasti např. animovaných reklam a podobných věcí ale může být situace opačná – primární přehrávání SWF ve Flash Playeru, s degradací do JS renderování (Smokescreen, apod.). Může se to měnit v čase, souvisí to s mnohem více faktory než je „starší a novější technologie“ a hlavně – ukáže praxe (což chtěl asi hlavně Radek říct).

        1. Martin Malý

          Re: degradace a praxe

          Opakuji: „Degradation“ je ve webdesignu neutrální pojem, vyjadřující „odstoupení“ od nové vylepšené technologie v zařízeních, které ji nedovolují zpracovat (v protikladu k „enhancement“, viz výše zmíněný odkaz). Obávám se, že číst slovo „degradace“ v tomto případě coby ekvivalent pro „zhoršení“ je pouze problém neznalosti webdesignérské terminologie.

          1. pas

            Re: degradace a praxe

            Já tomu pojmu přece rozumím a od začátku souhlasím. Radek Hulán mu myslím taky rozumí, pouze odhaduje, že degradace povede opačným směrem – zařízení, která nemají nový Flash Player 10.1, použijí staré HTML5. ;-)) Já si to nemyslím (myslím si to třeba ovšem v případě reklamních animací), ale jak to opravdu bude, ukáže až praxe.

            1. Martin Malý

              Re: degradace a praxe

              Chápu, jak vás to slovo dráždí svým druhým významem a že je „politicky neúnosné“ přijmout tvrzení „degradovat k Flashovému přehrávači“. Ale vývoj videa na webu v čase je jasný: RealVideo a spol. → Flash → HTML5 Video. Tedy od specifických pluginů přes obecný plugin až k funkci zabudované přímo do prohlížeče… Krok z prohlížeče zpět k pluginu (v prohlížečích, které funkci zabudovánu nemají) je zkrátka označován jako „degradation“, bez ohledu na čísla verzí Flashe a HTML.
              Ten fór se starým HTML5 a novým Flash 10.1 je ale moc dobrý. ;)

              1. pas

                Re: degradace a praxe

                Vůbec mě to nedráždí, už potřetí opakuju, že si (narozdíl od Radka Hulána) myslím, že video v HTML je přirozenější než ve Flashi a těším se na něj. Degradace k flashovému přehrávači pak bude pravděpodobný přirozený scénář.
                Pouze jsem se zamyslel, jak to Radek myslel – psal svůj tip na budoucí realitu, nikoliv hodnocení. Technologie se vyvíjejí a podle toho, která bude v daném čase výhodnější (což je samo o sobě výsledek mnoha faktorů), se bude degradovat směrem A->B nebo B->A nebo dokonce oběma směry, v různých aplikacích týchž technologií.

              2. pas

                Re: degradace a praxe

                Uvedu jiný příklad – odpradávna se princip „degradation“ používal při nahrazení flashové animace animovaným GIFem. A to přesto, že k primární technologii byl zapotřebí plugin, zatímco k té degradované nikoliv. Plugin-neplugin totiž není všechno, uživateli je to úplně fuk, jde o výsledek. Flash nebo Silverlight budou samozřejmě s HTML soupeřit i nadále i v tom videu. No a pokud se hypoteticky ukáže, že dosahují lepších výsledků než HTML video, tak asi jen masochista by je nevyužíval. To je evoluce skrze konkurenci, buďme za ni rádi.

                1. Martin Malý

                  Re: degradace a praxe

                  V začátcích webu byly animace řešené GIFem, pak přišla novější technologie, a pro prohlížeče, co novější technologii nemají, je „degradation“ animovaný GIF. S pluginama to nemá nic společného.
                  Další diskuse je, myslím, zbytečná – základem celého „sporu“ bylo chápání slova „degradace“, a to chápeme, jak jsme si teď ujasnili, stejně. Pro hovory o kvalitě videopřehrávačů navrhuju založit nové vlákno. :)
                  Ostatně si dovedu představit prohlížeče či knihovny, které budou, v případě Vámi popsané „vyšší technické kvality videa ve Flashi“, interně překládat tag video jako embedded flash objekt. :)

                  1. Radek Hulán

                    Re: degradace a praxe

                    Když si Martine přečteš ty komentáře a článek, v němž se hovoří o „… můžeme degradovat na flashový přehrávač. Dokonce již existují pěkné pluginy např. pro jQuery ..“, tak autor zastává rozjásaný (a ničím nepodložený) názor, že HTML5 je použitelné dnes, či dokonce v něčem lepší nebo snad „výhodné“, což prostě není pravda. Dělat video přehrávač pro Flash je nutnost, pro HTML5 volba, a to pouze díky nepodpoře Flashe v iPhone a iPadu.
                    V ČR se to dá ignorovat (pro video na mobilu je potřeba 3G připojení a to není skoro nikde, Youtube stejně funguje přes speciální aplikaci), takže jen v USA se skutečně k degradaci Flashe na HTML5 video musí sáhnout.
                    Ty hodnotící prvky typu „vyzkoušejte si nové tagy, je to super, pro nepodporu v prohlížečích tam plácenete Javascript“, to je nadšení, ale ne realita. Čláánku to škodí, na druhou stranu, někdo nenadšený by jej vůbec nenapsal, a to by byla ještě větší škoda :)

              3. Patrik Ján

                Re: degradace a praxe

                Degradujeme vzhľadom na funkčnosť, nie vzhľadom na technológie. Čiže video, ktoré reaguje na pohym myšou po webstránke budeme degradovat z Flash na HTML5 a video tvorené animáciou vektorov s fade efektami, ktoré sú vo flashi natívne, degradujeme na tiež z HTML5 na Video. Osobne tento pojem chápem takto. Nie v súvislosti v vývojom tej ktorej technológie.

                1. Patrik Ján

                  Re: degradace a praxe

                  „a video tvorené animáciou vektorov s fade efektami, ktoré sú vo flashi natívne, degradujeme na tiež z HTML5 na Video“
                  myslené samozrejme „z Flash na Video“ pardon

      2. PeterKahoun

        Re: degradace a praxe (terminologie)

        Z mého pozorování není pravda, že degradation nemá hodnotící konotaci. Ano, má, ale většinou je mírněna přívlastky jako „graceful“ (které Honza Sládek ve svém jazyce bohužel někdy vynechává).
        (Chtěl-li bych být neutrální, nebylo by lepší mluvit o fallbacku?)
        Gracefull degradation vnímám jako poskytnutí *neplnohodnotné* náhrady, tedy z nějakého pohledu k degradaci (poklesu kvality) dochází (například v dojmu uživatele).
        Příklad 2: gracefull degradation (v CSS): rgba(255,255,­255,0.8) ⇒ #eee (degradace v původním smyslu je zřejmá).
        Příklad 2: kvalitativně stejná náhražka (opět CSS): opacity:0.8 ⇒ filter: alpha(opacity=80);
        Takže bych se ptal, jestli je flashový přehrávač videa plnohodnotnou náhradou za HTML5 video, anebo horší, anebo lepší a z toho bych vyvozoval, kterým směrem by se mělo fallbackovat. Problém asi bude, že z nějakého hlediska je flash lepší a zároveň z jiného horší. (Jaké jsou tady argumenty?)
        Zajímalo by mě také: jak (technicky) vypadá fallbackování flash->html5 a html5->flash?

        1. bauglir

          Re: degradace a praxe (terminologie)

          html5->flash
          prohlížeč vezme to první, čemu bude rozumět, tzn. h264+acc(mp3), pokud ne, potom theoru+vorbis, pokud ne, potom flash:
          <video width=„320“ height=„250“ controls=„controls“ poster=„poster.jpg“ id=„video“>
          <source src=„http://b­auglir.com/nir­vana.mp4“ />
          <source src=„http://b­auglir.com/nir­vana.ogg“ />

          <object classid=„clsid:d­27cdb6e-ae6d-11cf-96b8–444553540000“
          codebase=„http://d­ownload.macro­media.com/pub/shoc­kwave/cabs/flash/swfl­ash.cab#versi­on=9,0,0,0“ width=„650“ height=„555“ id=„VideoPlayer“
          >
          <param name=„allowScrip­tAccess“ value=„*“ />
          <param name=„allowFu­llScreen“ value=„true“ />
          <param name=„movie“ value=„flvpla­yer2.swf?vide­o=nirvana.flv“ />
          <param name=„image“ value=„poster.jpg“ />
          <param name=„quality“ value=„best“ />
          <embed src=„flvplayer2­.swf?video=nir­vana.flv“ quality=„best“ width=„640“ height=„500“ name=„VideoPlayer“
          allowScriptAc­cess=„*“ allowFullScre­en=„true“ type=„application/x-shockwave-flash“
          pluginspage=„http://w­ww.macromedia­.com/go/getflashpla­yer“ />
          </object>
          </video>

    4. tewy

      Re: degradace a praxe

      jj, standardni sada der do systemu s jejichz opravou si adobe moc prace nedava,
      castecna funkcnost na windows (katastrofalni nefunkcnost na jinych platformach), neschpnost adobe za 7 let vytvorit 64bit verzi – v tom je flash jasne lepsi

      1. Martin Malý

        Re: degradace a praxe

        Flamewar na téma „Flash je zlo!!!“ tu už několikrát proběhl, je zbytečné rozpoutávat další.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=3257