Tvorba WWW stránek - semestrální úkol
MULTIMÉDIA V HTML5
Jedním z hlavních cílů HTML5 je také zjednodušit a standartizovat vkládání hudby a videa, které se dnes stávají čím dál běžnější součástí webových stránek. Chtěl-li tvůrce dříve umístit na své stránky video, musel se uchýlit k javě, flashi nebo využít vnořené plovoucí rámy. V HTML5 se však jak video tak zvuk stávají přímo prvky HTML kódu, což výrazně zkracuje kód stránky a především klade mnohem nižší nároky na autora webu.
VIDEO
K vkládání videa slouží v HTML5 párový tah <video>, který má několik atributů:
- src - určuje umístění přehrávaného souboru
- width - určuje šířku prvku v pixelech
- height - určuje výšku prvku v pixelech
- poster - zadává se url pro určení titulního obrázku videa
- controls - 0/1 - zobrazuje se ovládací lišta
- autoplay - 0/1 - spouští se automaticky po načtení stránky
- loop - 0/1 - opakované přehrávání
- preload - předukládání do paměti
- preload - zapnutí/vypnutí zvuku při přehrávání
Prohlížeče aktuálně (prosinec 2012) podporují tři formáty videosouborů (viz. tabulka Č.1), přičemž na pomyslné první příčce stojí Google Chrome s podporou všech tří formátů a v podpoře videa naopak zaostávají prohlížeče Internet Explorer a Safari, který přehrávají výhradně soubory ve formátu MP4.
| Tab. č.1: podpora tagu <video> | ||||
|---|---|---|---|---|
| prohlížeč | logo | MP4 | WebM | OGG |
| Internet Explorer 9+ |  |
ANO | NE | NE |
| Chrome 6+ |  |
ANO | ANO | ANO |
| Firefox 3.6+ |  |
NE | ANO | ANO |
| Safari 5+ |  |
ANO | NE | NE |
| Opera 10.6+ |  |
NE | ANO | ANO |
AUDIO
V podstatě tím samým v bledě modrém je párový tag <audio>, s tím rozdílem, že tentokrát kromě videa vkládáme zvukovou stopu. Má následující atributy:
- src - určuje umístění přehrávaného souboru
- autoplay - 0/1 - zvuk se spouští automaticky po načtení
- loop - 0/1 - opakované přehrávání
- preload - předukládání do paměti
- controls - 0/1 - zobrazuje se ovládací lišta
Co se podpory ze strany prohlížečů týče, je opět nejuniverzálnějším (přehraje formáty MP3, WAV a OGG) řešením Google Chrome, zatímco Internet Explorer podporuje jen formát MP3.
| Tab. č.2: podpora tagu <audio> | ||||
|---|---|---|---|---|
| prohlížeč | logo | MP4 | WaV | OGG |
| Internet Explorer 9+ | |
ANO | NE | NE |
| Chrome 6+ | |
ANO | ANO | ANO |
| Firefox 3.6+ | |
NE | ANO | ANO |
| Safari 5+ | |
ANO | ANO | NE |
| Opera 10.6+ | |
NE | ANO | ANO |