4. lekce: Obrázky, video, audio

Středa, Září 24th. 2008 | 4. Lekce - Obrázky

Pro vložení obrázku do stránky slouží nepárový element img. Povinnými atributy jsou src, jehož hodnotou je název obrázku, případně i s cestou a alt obsahující alternativní text, který se zobrazí, pokud je obrázek prohlížeči nedostupný, buď proto, že se na zadané adrese nenachází, nebo proto, že prohlížeč obrázky nezobrazuje. Alternativní text by měl tedy nějakým způsobem příblížit, co je na obrázku těm, kteří jej nevidí. Nepovinným atributem je title, jehož hodnota se zobrazí jako bublinová nápověda. Pokud není uveden, v bublinové nápovědě se zobrazí hodnota atributu alt.

<img src=”logo.jpg” alt=”Logo W3C” title=”Logo W3C” />

Logo W3C

Obrázky je potřeba používat na webu opatrně. Kromě výběru vhodných obrázků je třeba dbát na jejich datovou velikost, zdaleka ne každý si může dovolit prohlížet stránky, zejména při mobilním připojení. Obrázky, které mají význam pouze pro design stránky, by měly být vkládány pouze pomocí CSS stylu, a to jako obrázek na pozadí.

Velikost obrázku

Velikost obrázku není nutné zadávat. Pokud velikost obrázku není zadána, prohlížeč zobrazí obrázek v plné velikosti. Na stránku je vhodné vkládat obrázky ve své skutečné velikosti, nezmenšovat ani nezvětšovat je pomocí prohlížeče, ale pomocí grafického editoru. Pokud totiž obrázek o velikosti např. 100×100 pixelů zmenšíme v prohlížeči na 50×50, docílíme tak sice požadované velikosti, ale uživatel bude zbytečně stahovat více dat, protože bude stahovat obrázek v původní velikosti.

Obrázková mapa

Obrázkové mapy využijeme například pro různé navigační lišty. Obecně se jedná o obrázek, jehož jednotlivé části mají sloužit jako odkazy na různá místa. Mapa se vytváří pomocí elementu map. Jeho povinným atributem je id, což je atribut sloužící jako identifikátor této mapy. Jeho hodnotou je tedy nějaký textový řetězec, na který se později bude obrázek této mapy odvolávat.

Element map obsahuje libovolný počet (nejméně jeden) elementů area, které vymezují prostor z obrázku, který bude odkazem a určují, kam bude odkazovat. Tvar hranice aktivní oblasti (tj. místo, na které budeme moci kliknout a odkázat se na daný dokument) určuje atribut shape. Jeho hodnotou je buď rect (obdélník), poly (mnohoúhelník) nebo circle (kruh).

Konkrétní vymezení oblasti je dáno atributem coords. Jeho hodnotou jsou čísla oddělená čárkou, která definují vrcholy n-úhelníku. V případě obdélníku je to v pořadí: souřadnice x,y levého horního rohu, souřadnice x,y pravého dolního rohu. Obdobně po sobě budou následovat všechny vrcholy mnohoúhelníku. V případě kružnice jsou zadávána čísla v pořadí: souřadnice x,y středu, poloměr kružnice.

Pozn.: Počátek soustavy souřadnic je v levém horním rohu obrázku.

Povinným atributem elementu area je alt a neméně důležitým href, který určuje cíl odkazu. Takto můžeme rozdělit obrázek na několik aktivních oblastí. Mapa je již vytvořena, stačí jen říct obrázku, aby ji použil. Toho docílíme pomoci atributu usemap (atribut tagu img). Jeho hodnotou bude tentýž řetězec, jaký jsme použili v elementu map u atributu id.

<map id =”mapa”>
<area shape =”rect” coords =”0,0,82,126″ href =”slunce.htm” target=”_blank” alt=”O Slunci” />
<area shape =”circle” coords =”90,58,3″ href =”merkur.htm” target =”_blank” alt=”O Merkuru” />
<area shape =”circle” coords =”124,58,8″ href =”venuse.htm” target =”_blank” alt=”O Venuši” />
</map>
<img src =”planety.gif” alt=”Planety” usemap =”#mapa” />

Video

HTML5 zavádí nový element <video> , který umož?uje (teoreticky) jednoduše vložit video do stránky. K dispozici jsou následující atributy:

  • „src“ – cesta k videu, které má být přehráno
  • „width“ a „height“ – stejně jako u obrázků lze nastavit rozměry videa. Pokud nenastavíte, prohlížeč použije to, co se mu zdá pro video vhodné. Stačí nastavit jen jeden rozměr, druhý si prohlížeč dopočítá.
  • „controls“ – prohlížeč zobrazí své defaultní prvky pro ovládání videa (přehraj, zastav atd).
  • „poster“ – url obrázku, který se zobrazí v době, kdy se video načítá.
  • „autoplay“ – video se spustí ihned po načtení.
  • „autobuffer“ – pokud jste si jisti, že uživatel si bude chtít video pustit, můžete ho začít automaticky načítat, jinak se začne načítat až ve chvíli, kdy ho uživatel aktivuje.
  • „loop“ – video se bude přehrávat ve smyčce

Pro pokrytí co nejširšího pole prohlížeču je vhodné mít video ve více podporovaných formátech, např. MP4 a OGG.

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

Následně prohlížeč postupuje shora dolů a vybere ten formát videa který zná.

AUDIO

Pro přehrávání audia se používají 3 formáty, a to mp3, wav a ogg vorbis. Každý prohlížeč podporuje to, co mu připadá lepší.

Implementace je podobná jako u videa.

KONTAKTNÍ FORMULÁŘ

Jméno:

E-mail:

Váš vzkaz:

sedm plus pět =

VYHLEDÁVÁNÍ

PODĚKOVÁNÍ

Logo projektu