Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky

Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky

Články Webdesign

Naposledy jsme si užili teorie a povídali si o stavu implementace elementu <video>. Dnes to bude čistá praxe. Je čas, abychom základy z minula využili a nějaké video publikovali. (Důrazně doporučujeme přečíst si minulý článek, než začnete číst tento). Na závěr článku si doplníme vzdělání ještě o element <audio>.

První krůčky

Z minula již víme, jak vypadá základní syntaxe tagu video. Neukázali jsme si, ale jak to vypadá v prohlížeči – tak to hned napravme:


Jan Sládek

Screenshot přehrávače videa v prohlížeči Chrome

Obrázek pochází z prohlížeče Google Chrome, v jiném prohlížeči budou ovládací prvky vypadat jinak. Neříkejte, že jste překvapeni, stejně si chcete udělat vlastní. HTML5 nám k tomu nabízí API.

API pro ovládání <video>

Abychom si mohli udělat vlastní ovládací tlačítka (nejčastěji se pro to používá element <button> a CSS), tak máme několik JavaScriptových API, které můžeme volat. Je jich docela dost, my se podíváme jen na několik základních.

Technicky přehrávání <video> (i <audio>) zajišťuje interface nsIDOMHTMLMedi­aElement a to také definuje, co můžeme používat my, jako vývojáři. Více si můžete přečíst třeba u Mozilly.

Jak se s tím pracuje? Například takto spustíte video:

var prahravac = document.getElementsByTagName("video")[0];
prehravac.play();

Skvěle i s příklady to shrnuje Opera (v angličtině).

Podívejme se na některé další možnosti pro ovládání:

  • play() and pause() – první zapne a druhé pozastaví video. Je zajímavé, že neexistuje volání stop().
  • volume – hodnota hlasitosti od 0.0 do 1.0
  • muted – nezávisle na hlasitosti můžete videu vypnout zvuk
  • currentTime – vrací čas v sekundách místa, které se zrovna přehrává

Výborně, tak teď již umíme video ovládat. No jo, ale video v jakém formátu?

Formát videa

Abychom mohli přehrát video, potřebujeme ho nějakým způsobem dostat do toho „správného“ formátu (o kterých jsme mluvili minule).

Protože potřebujeme pokrýt co možná nejvíc prohlížečů, musíme publikovat video alespoň ve dvou formátech, o kterých jsme mluvili (MP4, OGG). Doporučujeme rovnou použít i WebM, začíná se výrazně prosazovat. Časem nám z toho naopak pravděpodobně vypadne OGG, Firefox, kvůli kterému ho potřebujeme, ve své čtvrté verzi již obsahuje podporu WebM.

Pokud tohle absolvujeme (a každé video tedy převedeme do všech třech formátů, což není nikterak krátký proces), tak potřebujeme nějak říct prohlížeči, že si má vybrat. Element <video> nám to umožňuje velmi jednoduše:

<video width="320" height="240" controls>
    <source src="mojevideo.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="mojevideo.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    <source src="mojevideo.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

Prohlížeč pak půjde shora a použije první formát, který zná. Dejte si pozor a první uveďte mp4, prohlížeč Safari v zařízení Apple iPad v současnosti obsahuje chybu a video jinak nepřehraje. (A slyšel jsem, že jeho uživatelů je v Čechách spousta, hned jedenáct takových jich prý bylo na iDevCamp. – Pozn. aut.)

Převádíme video do jednotlivých formátů

Nejjednodušeji převedete video do formátu OGG. Stačí nainstalovat Firefox 3.5+ a jít na adresu http://firefog­g.org/, poté už vás provede průvodce.

Na WebM už si budeme muset pomoci příkazovým řádkem (shellem). Pomůže vám návod pro Windows a pro Linux.

A na MP4 použijeme multiplatformní prográmek HandBrake.

Celý proces skvěle i s obrázky popisuje Mark Pilgrim ve svém Dive into HTML5.

Moment – jak je to s tím licencováním MP4?

Pokud jste pozorně četli předchozí díl, tak si určitě pamatujete, že MP4 (respektive H.264) je patentově chráněno a musí se platit licenční poplatek za užívání. Naštěstí ne na internetu, v tuto chvíli můžeme video v tomto formátu publikovat zdarma až do roku 2015. Co bude pak? Nikdo neví. Ale pět let je dlouhá doba.

Co s IE

Safari, Chrome, Firefox i Opera podporují HTML5 video, určitě budete ale chtít podporovat i Internet Explorer. Tomu nabídneme Flashový přehrávač (který přehrává video ve formátu MP4).

V podstatě neuděláme nic jiného, než že na místo, kde jsme minule uvedli text „Stáhněte si video“, vložíme flashový přehrávač.

<video width="320" height="240" controls>
    <source src="mojevideo.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="mojevideo.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    <source src="mojevideo.webm" type='video/webm; codecs="vp8, vorbis"'>
    <object width="320" height="240" type="application/x-shockwave-flash" data="flash.swf">
        <param name="movie" value="flash.SWF">
        <param name="flashvars" value="image=poster.jpg&amp;file=mojevideo.MP4">
        <img src="mojevideo.JPG" width="320" height="240" alt="title"
             title="No video playback capabilities, please download the video below">
    </object>
</video>

A je to.

Nevymýšlejme kolo

Protože v Americe je teď <video> hodně populární (důvod je jediný: iZařízení), tak webdesigneři již vymysleli několik řešení, ve kterých vy použijete tag video a vložíte kus JavaScriptu. Ten už pak zajistí, že když prohlížeč nepodporuje <video>, tak mu předloží flashový prohlížeč.

Mashable představuje 5+1 takovýchto řešení. Pokud chcete <video> začít používat, určitě se na ně podívejte.

<audio>

Situace s <audio>  je vlastně stejná jako s <video>.

Máme tu tři formáty (Ogg Vorbis, MP3, WAV) a každý prohlížeč zase podporuje, co mu připadá nejlepší.

  • Firefox 3.5+ – Ogg Vorbis, WAV
  • Safari 4+ – MP3, WAV
  • Chrome 3+ – Ogg Vorbis, MP3
  • Opera 10.5+ – Ogg Vorbis, WAV

Takže opět potřebujeme více formátů (tentokrát dva), odkážeme na ně stejně jako u <video>  a pro IE degradujeme (toto není cílená provokace, prostě se to slovo ve webdesignérském řemesle používá, jak se snažil vysvětlit v poslední diskusi Martin Malý. – pozn. aut.) na Flash.

Pro zájemce o API dodáme, že je to obdobné jako u <video>, podívejte se na HTML5 Doctor.

A samozřejmě je tu i kus JavaScriptu, který nám implementaci usnadní. Tentokrát se jmenuje jPlayer.

Závěrem

Když se člověk nezabývá problémy s kodeky atd., tak je vlastně implementace HTML5 <video> tagu poměrně jednoduchá a přímočará.

V diskusi pod minulým článkem bylo také naznačeno, že bychom měli spíše říkat degradace z Flashe na HTML5 video. Možná, nevím. Já jen vím, že YouTube a Vimeo pomalu přechází na <video>, Apple se do implementace Flashe nehrne (což otevírá prostor dalším, aby Flash neimplementovali) a jako webdesignérovi se mi příjemněji pracuje s <video>  než s flashovým přehrávačem. Každý si ale nakonec musí udělat na věc vlastní názor. Poslední dva články vám k tomu, doufám, poskytly dostatek informací.

Komentáře

Subscribe
Upozornit na
guest
18 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
onyx

Proč pro IE hned používat Flashový přehrávač? Není jednodušší použít tag IMG s parametrem DYNSRC? Celý příklad by pak vypadal nějak takhle:
01.<video width=„320“ height=„240“ controls>
02. <source src=„mojevideo.mp4“ type=‚video/mp4; codecs=„avc1.42E01E, mp4a.40.2“>
03. <source src=„mojevideo.ogv“ type=‘video/ogg; codecs=„theora, vorbis“>
04. <source src=„mojevide­o.webm“ type=’video/webm; codecs=„vp8, vorbis“>
05. <img dynsrc=„mojevi­deo.mp4“ width=„320“ height=„240“>
06.</video>

dodo

Pretože to funguje iba pre ie6 a nižšie..takže pre ie7 a vyššie by bolo potrebné aj tak použiť flash

juraj

Trochu vidím problém v krátkozrakosti webdizajnérov. Aj sám autor článku hovorí „Safari, Chrome, Firefox i Opera podporují HTML5 video“ – naozaj? Myslím, že dnes ešte nie je problém, aby na stránku prišiel návštevník s Firefoxom 3.0 alebo Operou 10.10. Použiť video + img dynsrc, aj keby to podporoval aj IE8, je hlúposť.
V posledných rokoch veľmi stúpli požiadavky na aktuálnosť verzie prehliadača, aj keď stránky sa robia také isté.

pas

Jen drobnost. „Apple se do implementace Flashe nehrne (což otevírá prostor dalším, aby Flash neimplementovali)“ – to je celkem úsměvné, protože opak je pravdou, Android 2.2 a další budou mít Flash jako hlavní konkurenční výhodu proti Applu. Už teď se to zmiňuje v každém stručném popisu nových mobilů. Apple tím paradoxně Flashi pomohl, protože jinak konkurenti horko těžko hledají něco proti iPhonu.
Jinak článek fajn, video v HTML je budoucnost, stejně jako animované reklamy, atd. na toto všechno je dnes už blbost používat Flash, ten je na náročnější věci.

Martin Malý

Výklad je trošku jiný: „otevírá prostor dalším, aby Flash neimplementovali“ je poměrně jasné – výrobci zařízení byli trhem tlačeni k tomu, aby Flash implementovali, protože „nemít Flash“ znamená mít konkurenční nevýhodu. Apple svým postojem otvírá těmto výrobcům možnost říct: „Ne, my Flash dělat nemusíme, protože ani Apple ho nemá, takže je to tržně průchozí“. Nadále ovšem platí, že nabídnout standard A Flash je výhoda proti nabízení pouhého standardu.

pas

Byli tlačeni? Vždyť až dosud prakticky Flash na telefonech nebyl (Flash Lite nelze počítat). Naopak teď bude, a navíc patřičně marketingově zdůrazňován. Flash neučiní telefon dražším, větším a těším (byť to Steve Jobs naznačuje jeho přirovnáním k disketové mechanice, která už také prý není potřeba :)) – nejhorší, co se může stát, je, že zůstane ležet ladem, nebude-li mít co přehrávat, když vývojáři přejdou na lepší technologie.

andrejk

prasacky napisany flash zvysuje spotrebu zariadenia a tym znizuje komfort. a najst prasacky napisany flash na weboch vobec nie je problem.

pas

A prasácky napsaná aplikace dobrovolně stažená z app storu nikoliv? Dobře, Apple tam ty největší prasárny nepustí. U Androida holt musíte zapojit svobodnou vůli v tom, jaké stránky navštívíte a co si nainstalujete. :)

Martin Malý

Je toto vlákno „flamewar Flash vs Apple“, nebo jsem něco přehlédl?

pas

Nikoliv, diskutujeme o tom, zda podpora nějaké technologie přináší nějaké nevýhody výrobcům či uživatelům (a to v přímé návaznosti na jednu větu článku). Je normální podpořit argumenty srovnáním a protipříklady.

Martin Malý

Nikoli, diskutujeme o tom, jestli krok Apple může podpořit nějaké další výrobce v rozhodnutí, že nebudou Flash implementovat – protože takový byl smysl věty v článku. „Výhody a nevýhody implementace“ jsou podružné téma, navíc těžko rozhodnutelné, ale bez ohledu na téma je Váš předchozí komentář přesně ve stylu argumentu „… a u vás zase bijete černochy!“

pas

No ano, přesně o tom diskutujeme – zda má taková úvaha smysl. S tím přece ony výhody a nevýhody souvisí naprosto bezprostředně. Jak bychom jinak posoudili, zda smysl má, kdybychom si nepopovídali o možných výhodách a nevýhodách, které to výrobcům přináší? Ještě bych podotknul, že se nejedná o „implementaci Flashe“, ale o „implementaci pluginové architektury“. Jednotlivé pluginy už implementuje někdo jiný. Mě by třeba zajímalo, jestli někoho (autora či kohokoliv jiného) napadají nějaké ty výhody zavržení pluginové architektury.

pas

S tím naprosto souhlasím. Až na to, že mě to šumák není – a to proto, že nejsem webdesigner. :) Ten, kdo produkuje pluginy, nebo obsah pro tyto pluginy, samozřejmě není webdesigner, ale obecný vývojář. A pochopitelně ho zajímá, jakou budoucnost má architektura pluginů, čili propojení výhod nativních aplikací s výhodami webového sandboxu (jenž má tudíž smysl i pro newebdesignera). Snad je to legitimní diskuse. :)

andrejk

na stranku dava prasacky flash autor stranky na zaklade scestnej uvahy inzerenta ze otravna reklama niekoho zaujme. moze ist aj o nevedome umiestnenie pomocou nejakeho vymenneho reklamneho systemu.
na to, aby som sa na taku stranku dostal, nemusim nic instalovat – staci mi len prist na dany oblubeny sajty (root.cz, sme.sk, …). ked nemam flash, nemam ziadne animovane zhovadilosti, t.j. baterka v zariadeni mi vydrzi dlhsie.

pas

No tak si přece Flash Player nemusíte vůbec nainstalovat. Nebo použijete něco na blokování reklamy, atd. – na otevřených mobilních OS jsou možnosti stejné jako na otevřených desktopových systémech.
Zkrátka obecně se mi nezdá, že nepodporovat něco je lepší než to podporovat (nezapomínejme přitom na původní smysl slova „podporovat“).

mpscz

Stačí Flash na stránkách zablokovat nějakým plug-inem do browseru. A málokdy nějaký ten Flash na stránkách musím odblokovat. V takových případech se jedná o prasácký web udělaný celý ve Flashi nebo menu či jiné ovládací prvky na stránkách udělané ve Flashi.

pas

Ještě na téma „degradace“ diskutované u minulé části:
Jak si např. onu degradaci představuje YouTube:
„HTML5’s video support enables us to bring most of the content and features of YouTube to computers and other devices that don’t support Flash Player“
http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.