6#Hodina – Multimedia

Dnes to raději napíšu hned na začátek. Odevzdání dnešní práce budu kontrolovat DATEUNKNOWN ve 22:00.

Multimedia jsou například obrázky, hudba, videa, animace a další. My se dnes budeme soustředit na to co jsme zatím nepoužily a to hudbu (zvuky) a videa. Animace jsme již použily a to, když jsme používali formát gif 🙂 Také si ale ukážeme další formát obrázků.

Youtube

To nejsnadnější na začátek 😀 Vložit video z Youtube do HTML5 stránky zvládne i malé dítě a vyžaduje pouze pár kliknutí a CTRL+C a CTRL+V.

1. Najdete video, které chcete dát k sobě na stránku
2. Kliknete na sdílet
3. Vybere “vložit”
4. CTRL+C
5. CTRL+V do body nějaké stránky
6. HOTOVO!

 

Ve vašem případě si přidejte nějaké video do úvodní stránky vašeho menu z 5. hodiny.

Audio

GET MP3 file

Přidání tlačítka na přehrání hudby je celkem snadné a použijeme tag <audio>. Podporované formáty jsou .MP3, .OGG a .WAV. Bohužel ne všechny na každém prohlížeči. Pokud používáte Chrome, Firefox nebo Operu jste v klidu a pustíte všechny 3 formáty. Pokud máte jablíčko … ehm Safari neumí OGG a pokud ještě používáte IE tak máte pouze MP3. Z toho vyplývá, že budeme používat formát MP3, protože se nám nestane, že by to někomu nefungovalo. Případně můžeme používat více zdrojů, ale k tomu až později.

Tag audio je párový, jedinou věc kterou do něj píšeme je zdroj, který na rozdíl od obrázků NENÍ parametrem. To znamená, že tam nebude něco jako <audio src=”zvuk.mp3″></audio>. Zdroj má vlastní nepárový tag <source>, který již obsahuje parametr src.

Takže přidání zvuku může vypadat takto:

A teď k tomu krásnému řádků s hvězdičkou. Pokud někdo z vašich návštěvníků přijde na vaši stránku s prohlížečem, který nepodporuje HTML5 měli by jste mu to říct.

Teď se vrátíme o pár řádků zpět, kde píši o možnosti více zdrojů. Je totiž celkem běžné, že pro jistotu 100% kompatibility použijeme 2 klidně i 3 formáty a to hlavně u videa, ke kterému se dostaneme za chvíli. Prohlížeč si poté sám vybere formát, který zvládne.

Ne vždy však chceme přehrávač, někdy chceme hudbu tak, aby se postila po kliknutí na tlačítko, případně hrála ve smyčce na pozadí. Samozřejmě nebudeme používat zvuk na pozadí na běžné stránce. Už dlouho, jsem na žádnou stránku s hudbou na pozadí nenarazil a doufám, že již nenarazím. Většinou jsem takové stránky rychle zavíral 😀 . Samozřejmě u hry je to trochu o něčem jiném. A my už máme jednu jednoduchou hru hotovou hned z druhé hodiny.

Bod číslo 1. najít nějakou hudbu ve smyčce. Na hodině vám ukážu můj oblíbený zdroj a jak si z ní stáhnout MP3 přes zdrojový kód. Pro ty co nestíhají jedna smyčka.

Vytvoříme základní tag audio se zdrojem a upravíme první část. Poprvé jsme použili “controls” pro zobrazení ovládání. U hudby na pozadí máme dv možnosti. Můžeme nechat ovládání zobrazené a pouze přidat aby se hudba pustila sama a ve smyčce. Nebo, uživateli nedáme snadnou možnost jak hudbu vypnout a tak smažeme “controls”.

Takto upravený tag můžete dát prakticky kamkoliv do tagu body s ohledem na to, že ovládání vidět není. Pokud by jsme ale chtěli hře udělat ovládání zvuku, určitě nedáme hráči celé ovládání, ale vytvoříme si vlastní ovládání, které bude velmi podobné další úpravě audio tagu.

Ve hře většina tlačítek vydává nějaký zvuk. A tak přidáme zvuk i naším tlačítkům. První věc. Zase založíme tag <audio> se zdrojem, ale tentokrát přidáme ještě ID. Nyní můžete tento zvuk volat pomocí tlačítka. Opět budeme používat document.getElementById kde doplníme jméno audio tagu a na konec přidáme .play(). Výsledek může být třeba toto:

Aktuálně naše tlačítko pouze pouští zvuk. Pokud chceme, aby tlačítko dělalo více než jednu věc musíme napsat funkce, které po tlačítku chceme a oddělíme je středníkem. Počet funkcí, které tlačítko volá je omezený pouze výkonem klienta 😉

S tímto můžete celkem snadno vylepšit svou hru. Opět nějaký ten zvuk.

Bohužel u klikaček narazíte na problém, že se vám zvuk pustí jenom jednou a další se pustí až poprvé dohraje :/ Udělat to tak, aby se zvuk pouštěl přes sebe je malinko komplikovanější… Teda hodně komplikované.

Video

Video funguje hodně podobně jako audio. Opět párový tag, obsahuje tagy source a v tagu video přidáme na ovládání parametrem “controls”. Ale s ohledem na to, že se jedná o video budeme muset přidat ještě jednu věc a to velikost videa (rozlišení). Stáhněte si toto malé video, na kterém si to můžeme testovat. Samozřejmě velikost videa není nijak omezena, jen pro naše účely, sem dávám video s velikostí pod 1MB. Toto video má rozlišení 320 na 176 px. Takže náš tag s ovládáním by mohl vypadat nějak takto:

Ukázkové video má formát MP4, což je formát, který jde přehrát všude. Ale opět jsou další formáty. Opět pokulhává v podpoře IE a Safari a tentokrát úplně stejně. Chrome, Firefox a Opera podporuje navíc formáty WebM a OGG 🙂

Pokud chcete u videa měnit velikost, můžete opět smazat jeden atribut (raději height) a nastavovat velikost pomocí width. A s ohledem na to, že výchozí ovládací prvky nejsou nejkrásnější, můžete přidat opět ovládání přes tlačítka. Například play/stop tlačítko.

První věc, dáme si pryč controls a přidáme id. Někam na stránku si přidáme tlačítko a dáme necháme ho volat funkci playStop(). A do připojeného JS souboru přidáme funkci, ve které začneme funkci s IF/ELSE (podmínka). Musíme totiž napřed identifikovat zda video je puštěné a uživatel ho chce zastavit nebo video stojí a uživatel jej chce pustit. Tentokrát to není tak komplikované a se základní znalostí angličtiny pochopíte kód úplně bez problémů:

Ok … úplně bez problémů to nebude 😀 Chtěl jsem aby tlačítko Play vypadalo jako tlačítko play. Určitě víte, že můžete používat znaky z Unicode a ASCII. To je třeba jak držíte levý ALT + 13 = ♪. Toto je hodně podobné. Číslo vyjadřuje jaký znak UTF-8 tabulky chcete vypsat.
◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩

◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩

Tady jsou základní ovládací ikony 😉

K videu toho asi víc neuděláme 🙂

Obrázky

Vložení obrázku jsme již řešili, ale nezmínil jsem obrázky ve formátu SVG. SVG můžeme vytvořit v nějakém jednoduchém vektorovém programu třeba InkScape a poté jej vložit jako obyčejný obrázek. Oproti png, jpg i gif bude mít jednu velkou výhodu a to, že obrázek můžeme do nekonečna zvětšovat a obrázek stále zůstane ostrý. Prostě vektorová grafika.

Pomocí SVG můžeme ale “snadno” kreslit i ručně.

Na začátek si nakreslíme Japonskou vlajku. A jestli se ptáte proč, asi hlavně proto, že je hodně jednoduchá 🙂 Jen bych chtěl upozornit, pokud někdo dnešní práci neodevzdá v čas dostane za trest úkol vytvořit přes SVG vlaku Kazachstánu.

Na začátek tag SVG. Překvapivě <svg>, s parametry width a height. Jedná se o párový tag.

Na začátek si přidáme jeden obdélník, kterým vyplníme plochu na bílou. Tag je <rect> 🙂 nejlepší tag! A opět doplníme o šířku a výšku. V našem případě stejnou jako je velikost celého SVG. Další bude výplň (fill) Tu nastavíme na bílou. Můžeme použít jakýkoliv z barevných definicí, které jsme si již ukázali (#ffffff, rgb(255,255,255), rgba(255,255,255,0) nebo white). Jedna zvláštní věc zde bude konec tagu, kde musí být />.

Pokračujeme kruhem uprostřed. Tady to bude zajímavější 🙂 tag circle Napřed ukážeme kde budeme chtít střed kruhu. S ohledem na to, že vycházíme z angličtiny budeme potřebovat písmeno “c” jako center a souřadnice x a y. Parametry máme cx a cy. Pro jistotu x je šířka a x je výška. Když chceme aby kruh byl u na středu doplníme do cx polovinu šířky a do cy polovinu výšky. V matematice jste možná zaznamenali, že poloměr kružnice značíme r. Zde je to stejné. Takže dáme r=”50″ což znamená, že poloměr bude 50px. Posledním bode opět výplň. Nastavíme na červenou.

Poslední bod bude ohraničení celého SVG, s ohledem na to, že na bílé stránce by to mohlo vypadat jako jen červené kolečko, přidáme ohraničení. Můžeme použít CSS soubor nebo jen doplníme do SVG style=”” a do něj napíšeme styl. S ohledem na to, že CSS by jsme dneska použili jen na toto, napíšeme styl rovnou do HTML. Samozřejmě by bylo lepší to napsat přes CSS soubor.

 Zadání úkolu

1. Na úvodní stránku přidat video z Youtube
2. Do hry (úkol 2) přidat zvuk na pozadí a zvuk alespoň jednoho tlačítka
3. Vytvořit 5. hodinu a do ní dát vlajku Japonska a video králíčka s tlačítkem, které bude video pouštět a pauzovat
4. BONUS: Vytvořit vlajku České republiky