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

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

Seriál: Webdesignérův průvodce po HTML5 (21 dílů)

  1. Webdesignérův průvodce po HTML5 – díl nultý 25.5.2010
  2. Webdesignérův průvodce po HTML5 – nová sémantika 1.6.2010
  3. Webdesignérův průvodce po HTML5 – nová sémantika II 8.6.2010
  4. Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15.6.2010
  5. Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22.6.2010
  6. Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29.6.2010
  7. HTML5 Audio: rádio ve vašich stránkách 13.7.2010
  8. Webdesignérův průvodce po HTML5: Microdata 20.7.2010
  9. AppCache: webové aplikace i bez připojení 27.7.2010
  10. Webdesignérův průvodce po HTML5: WebStorage 3.8.2010
  11. Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10.8.2010
  12. Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17.8.2010
  13. Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24.8.2010
  14. HTML5: ukládáme si data k elementům 6.12.2010
  15. Webdesignérův průvodce po HTML5: Táhni a srůstej 5.1.2011
  16. HTML5: První krůčky s FileSystem API 15.2.2011
  17. Mobilizujeme web v HTML5 4.4.2011
  18. Single Page Apps a řešení problémů s historií 1.6.2011
  19. Page Visibility API: Kouká na mě vůbec někdo? 10.8.2011
  20. Práce se soubory v prohlížeči, díl 1 15.8.2011
  21. Práce se soubory v prohlížeči, díl 2 5.9.2011

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

Přehled komentářů

onyx Jednodušší řešení pro Internet Explorer
dodo Re: Jednodušší řešení pro Internet Explorer
juraj Re: Jednodušší řešení pro Internet Explorer
pas Flash
Martin Malý Re: Flash
pas Re: Flash
andrejk Re: Flash
pas Re: Flash
Martin Malý Re: Flash
pas Re: Flash
Martin Malý Re: Flash
pas Re: Flash
Jan Sládek Re: Flash
pas Re: Flash
andrejk Re: Flash
pas Re: Flash
mpscz Re: Flash
pas degradace
Zdroj: https://www.zdrojak.cz/?p=3262