HTML 5 – Lekce 7
V této lekci si povíme něco víc o nových funkcích HTML 5, konkrétně multimédiích. Až do verze HTML 5 byla totiž videa a audia zobrazována na stránce pomocí různých plug-inů na bázi flash. Ne všechny se ale zobrazují stejně a proto v HTML 5 přichází sjednocení vkládaní videí a zvuku.
Mluvnice pro tuto lekci:
<video> -párový – pomocí tohoto tagu vkládáme video
<audio> -párový -pro vložení zvukové stopy
<source> -nepárový – pomocí tohoto tagu se specifikuje zdroj videa/audia
<track> -nepárový – pro vložení textových složek do videa – titulky
Tyto zcela nové tagy jsou již podporovány ve většině nových prohlížečů, v nejpoužívanějším Google Chrome jsou podporovány všechny. Nyní ale k jednotlivým tagům postupně:
Tag <video> má spoustu atributů. Pomocí něj vkládáme na stránky video v podporovaných formátech. Ty jsou zatím 3 – mpeg4 s H264 video kodekem a AAC audio kodekem, WebM soubory s VP8 video kodekem a Vorbis audio kodekem a Ogg soubory s Theora video kodekem a Vorbis audio kodekem. Důležitou věcí je, že jakýkoliv text napíšeme mezi tagy <video> a </video> se zobrazí v případě, že prohlížeč video nepodporuje. Ale teď již něco více o atributech – vypíši vám jen ty nejdůležitější:
autoplay – nastavuje že se video začne automaticky přehrávat
controls – nastavuje jestli se mají zobrazit tlačítka pro kontrolu videa jako pause
loop – nastavuje smyčku na videu, bude se přehrávat dokola
preload – nastavení, jestli má prohlížeč video načíst při načtení stránky
src – zdroj videa
width – šířka videa
height – výška videa
Atributy autoplay, controls a loop jsou tzv. booleovské atributy. To znamená, že nemají žádnou hodnotu, zapisují se pouze jako slovo. Například:
<body>
<video src=“video.mp4“ controls>
</video>
</body>
Další z atributů již hodnoty mají. Například atribut preload nabývá hodnot auto, metadata a none. Auto znamená, že se video načte celé při načtení stránky. Metadata znamená, že se načtou při načtení stránky pouze metadata tohoto videa. None znamená, že se video vůbec nenačte. Tento atribut bychom měli brát v úvahu pokud chceme, aby se naše stránka načítala rychleji.
Atribut src se vysvětluje snad sám. Jeho hodnotou je URL zdroje videa nebo relativní odkaz, jak je popsáno v předešlých lekcích.
Zvuk vkládáme na stránky pomocí tagu <audio>. Jeho podporované formáty jsou zatím také 3 a to – Wav, MP3 a Ogg. Opět jakýkoliv text, který napíšeme mezi <audio> a </audio> se zobrazí pouze v případě, že browser není schopný zpracovat zvukovou stopu. Atributy <audio> jsou stejné jako u videa: autoplay, controls, loop preload a src.
Tag <source> nám dává možnost vložit více zdrojů pro video nebo audio. Spočívá v tom, že pokud prohlížeč nepodporuje jeden formát, může si vybrat jiný z vložených formátů, který přehraje místo toho. Například, pokud vložíme video, které nejde přehrát, je vhodné vložit ještě jiné, pro případ, že to by přehrát šlo. Má pár atributů, které si je vhodné vyjmenovat:
src – URL odkaz na zdroj videa
type – typ souboru
Typy souboru mohou být pro video: video/ogg, video/mp4, video/webm a pro audio: audio/ogg a audio/mp3.
Příklad použití tagu:
<html>
<body>
<source>
<video controls>
<source src=“video.mp4“ type=“video/mp4“> – Vkládáme video v mp4 formátu
<source src=“video.ogg“ type=“video/ogg“> – Pro jistotu vkládáme i druhé v ogg
Váš prohlížeč nepodporuje video – Připisujeme zprávu pro případ, že prohlížeč nepodporuje video
</video>
</body>
</html>
Tag <track> nám umožňuje vkládat textovou stopu do videa – například titulky. To ale není jediné jeho použití. Má mnoho atributů, některé z nichž si ukážeme:
kind – specifikuje typ textu
label – specifikuje název textu
src – zdroj titulků
srclang – specifikuje jazyk (požadován u titulků)
Atribut kind nám určuje typ textové složky videa. Hodnota captions označuje komentář dialogu a zvuků pro neslyšící. Hodnota descriptions zase určuje zvukový popis toho, co se děje pro slepé. Nás ale nejvíc bude zajímat hodnota subtitles, která nám slouží k vkládání titulků.
Pomocí atributu label vkládáme popis titulků. Tzn. že to nejčastěji bude název jazyka titulků – např English, Česky atd. Pokud ovšem vkládáme titulky, nesmíme zapomenout na povinný atribut srclang, do kterého píšeme kód jazyka titulků. Pokud jsou tedy v angličtině, bude hodnota srclang=“en“ , pokud jsou v češtině, bude hodnota srclang=“cs“.