Multimediálny na webe je zvuk, hudba, videá a animácie. Podpora pre animácie zvuky a videá je spracovaná rôznymi spôsobmi u rôznych prehliadačoch. Niektoré prvky môžu byť riešené inline, a niektoré vyžadujú osobitný pomocný program (plug-in).
3.1. Video formáty
| Formát | Súbor | Popis |
| AVI | . avi | AVI (Audio Video Interleave) formát bol vyvinutý spoločnosťou Microsoft. Formát AVI je podporovaný vo všetkých počítačoch so systémom Windows, a všetkými z najpopulárnejších webových prehliadačov. To je veľmi bežný formát na internete, ale nie vždy je možné prehrať na počítačoch s iným systémom ako Windows. |
| WMV | . wmv | Windows Media formát vyvinutý spoločnosťou Microsoft. Windows Media je bežný formát na internete, ale nie je ho možné prehrávať na iných OS ako Windows bez špeciálneho dodatočne nainštalovaného prehrávača. |
| MPEG | . mpg . mpeg |
MPEG (Moving Pictures Expert Group) je formát najviac populárny na internete. Je medziplatformový, a podporujú ho všetky z najpopulárnejších webových prehliadačov. |
| QuickTime | . mov | Formát QuickTime je vyvinutý spoločnosťou Apple. QuickTime je bežný formát na internete, ale QuickTime filmy sa nedajú prehrať na počítači s Windows bez extra nainštalovaných komponentov. |
| RealVideo | . rm . ram |
Formát RealVideo bol vyvinutý pre Internet Real Media. Formát umožňuje streamovanie videa (on-line video, Internet TV) s malým rozlíšením. |
| Flash | . swf . flv |
Flash (Shockwave) formát bol vyvinutý spoločnosťou Macromedia. Shockwave. Vyžaduje si osobitný prehrávač. Ale tento plug-in je dodávaný s predinštalovaným internetovým prehliadačom, ako je Firefox a Internet Explorer. |
| Mpeg-4 | . mp4 | Mpeg-4 (s H.264 kompresiou) je nový formát pre internet. V skutočnosti, YouTube odporúča používať MP4. YouTube prijíma viac formátov, a potom ich všetky prevádza na flv alebo. mp4. Stále viac a viac on-line videí sa sťahujú do MP4 ako formát pre zdieľanie internetového pripojenia ako pre Flash prehrávače a HTML5. |
3.2. Zvukové formáty
| Formát | Súbor | Popis |
| MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface) je formát pre elektronické hudobné zariadenia, ako sú syntetizátory a karty PC zvuku. MIDI súbory neobsahujú zvuk, ale digitálny hudobný návod (poznámky), ktoré je možné prehrávať prostredníctvom elektroniky (ako u vášho počítača so zvukovou kartou).MIDI je podporovaný mnohými softvérovými systémami vo veľkom rozsahu platforiem. MIDI je podporovaný všetkými z najobľúbenejších internetových prehliadačov. |
| RealAudio | . rm . ram |
Formát RealAudio bol vyvinutý pre Internet Real Media. Formát podporuje aj video. Formát umožňuje streamovať audio (on-line hudbu, internetové rádio) s nízkym rozlíšením. |
| Wave | . wav | Wave (priebeh) je formát vyvinutý spoločnosťou IBM a Microsoft. Je podporovaný vo všetkých počítačoch so systémom Windows, a všetkými z najpopulárnejších internetových prehliadačov (okrem prehliadača Google Chrome). |
| WMA | . wma | Formát WMA (Windows Media Audio), sa porovnáva s kvalitou MP3, a je kompatibilný s väčšinou prehrávačov, okrem iPod. WMA súbory môžu byť dodávané ako nepretržitý tok dát, čo je praktické pre použitie v internetovom rádiu alebo on-line hudbe. |
| MP3 | . mp3 . mpga |
MP3 súbory sú vlastne zvukovou časťou MPEG súborov. MPEG formát bol pôvodne vyvinutý pre video Moving Pictures Experts Group. MP3 je jeden z najpopulárnejších zvukových formátov pre hudbu. Systém kódovania kombinuje dobrú kompresiu (malé súbory) s vysokou kvalitou. |
3.3. HTML Object Element
Účelom tagu <object> je podpora HTML pomocných aplikácií (Plug-Ins).
Pomocná aplikácia je program, ktorý môže byť spustený v prehliadači „na doplnenie“ funkcií. Pomocné aplikácie sa tiež nazývajú Plug-Ins. Pomocné aplikácie možno používať na prehrávanie audio a video (a omnoho viac). Pomocné aplikácie spustíme pomocou tagu <object>. Jednou z výhod použitia pomocnej aplikácie pre prehrávanie audio a video, je to, že môžete nechať niektoré (alebo všetky) z nastavení prehrávača na ovládanie užívateľom. Väčšina pomocných aplikácií umožňuje obsluhe (alebo naprogramovaním) kontrolu nad nastavením hlasitosti a prehrávacích funkcií, ako napr. prevíjanie, pozastavenie, zastavenie a prehrávanie.
3.4. Najlepšie spôsoby, ako prehrať videá v HTML
Prehrávanie Wave Audio použitím QuickTime:
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="liar.wav" /> <param name="controller" value="true" /> </object>
Prehrávanie MP4 Video použitím QuickTime:
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" /> <param name="controller" value="true" /> </object>
Prehrávanie videa SWF pomocou Flash:
<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object>
Prehrávanie WMV filmov pomocou Windows Media Player:
<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uiMode" value="full" /> <param name="autosize" value="1"> <param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>
3.5. Prehrávanie zvuku v HTML
Prehrávanie audio vo formáte HTML nie je ľahké! Musíte vedieť veľa trikov, aby ste mali istotu, že vaše audio súbory budú prehrané vo všetkých prehliadačoch (Internet Explorer, Chrome, Firefox, Safari, Opera) a na hoc akom hardware (PC, Mac, iPad, iPhone).
3.5.1. Používanie tagu <embed>
Tag <embed> definuje kontajner pre externé (nie-HTML) obsahy. (Je to tag pre HTML5, neplatný v HTML 4, ale funguje vo všetkých prehliadačoch).
Nasledujúci fragment kódu môže zobraziť súbor MP3 vložený na webovej stránke:
<embed height="100" width="100" src="horse.mp3"></embed>
Možné problémy:
- <embed> Tag je neplatný v HTML 4. Vaša stránka nebude overená ako HTML 4.
- Rôzne prehliadače majú podporu iného zvukového formátu.
- Ak prehliadač nepodporuje formát súboru, nebude zvuk hrať bez príslušného plug-inu.
- Ak plug-in nie je nainštalovaný na počítači daného užívateľa, zvuk nebude hrať.
- Ak prevediete súbor do iného formátu, nemusí hrať vo všetkých prehliadačoch.
POZNÁMKA: Použitie (HTML5) sa rieši overením <DOCTYPE html> v hlavičke.
3.5.2. Použitie tagu <object>
Tag <object > môže tiež definovať kontajner pre externé (nie-HTML) obsahy.
Nasledujúci fragment kódu môže zobraziť súbor MP3 vložený do webovej stránky:
<object height="100" width="100" data="horse.mp3"></object>
Možné problémy:
- Rôzne prehliadače majú podporu iného zvukového formátu.
- Ak prehliadač nepodporuje formát súboru, nebude zvuk hrať bez plug-inu.
- Ak plug-in nie je nainštalovaný na počítači daného užívateľa, nebude zvuk hrať.
- Ak prevediete súbor do iného formátu, nebude hrať vo všetkých prehliadačoch.
3.5.3. Použitie tagu <audio> len HTML5 element!
Tag <audio> je prvok HTML5 kódu, je neplatný v HTML 4, ale funguje vo všetkých nových prehliadačoch.
<audio controls="controls"> <source src="horse.mp3" type="audio/mp3" /> <source src="horse.ogg" type="audio/ogg" /> Vas prehliadac nepodporuje tento audio format. </audio>
Vyššie uvedený príklad používa súbor mp3, ktorý funguje v aplikácii Internet Explorer, Chrome a Safari. Ak chcete, aby bol zvuk spustený vo Firefoxe a Opere, musí byť súbor typu OGG. Ak to nie je možné, zobrazí sa chybová hláška.
Problémy:
- Tag <audio> je neplatný v HTML 4. Vaša stránka nebude overená ako HTML 4.
- Musíte previesť audio súbory do rôznych formátov.
- <audio> element nefunguje v starších prehliadačoch.
POZNÁMKA: Použitie (HTML5) sa rieši overením <DOCTYPE html> v hlavičke.
3.5.4. Najlepšie HTML riešenie:
<audio controls="controls" height="100" width="100"> <source src="horse.mp3" type="audio/mp3" /> <source src="horse.ogg" type="audio/ogg" /> <embed height="100" width="100" src="horse.mp3" /> </audio>
Vyššie uvedený príklad používa dve rôzne zvukové formáty. <audio> HTML5 element sa pokúsi prehrať video buď ako mp3 alebo ogg. Ak sa to nepodarí, kód „sa pokúsi“ použiť <embed> prvok.
Problémy:
- Musíte previesť audio do rôznych formátov.
- Prvok <audio> nie je dôveryhodný ako HTML 4 a XHTML.
- Prvok <embed> nie je dôveryhodný ako HTML 4 a XHTML.
- Ak prvok <embed> nemôže „fall-back“ zobrazí sa chyba.
POZNÁMKA: Použitie (HTML5) sa rieši overením <DOCTYPE html> v hlavičke.
3.5.5. Najjednoduchší spôsob, ako pridať zvuk na vaše stránky
Najjednoduchší spôsob, ako pridať zvuk do vašich webových stránok je použitím Yahoo Media Player. Ten je určite favoritom.
Použitie Yahoo Media Player má odlišný prístup. Jednoducho nechajte Yahoo Media Player prehrávať vaše skladby na stránke.
Prehráva mp3 a mnoho ďalších formátov. Môžete ho pridať na vaše stránky (alebo blog) s jediným riadkom kódu, a ľahko premeniť vaše HTML stránky do profesionálneho playlistu.
<a href="horse.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>
Použitie prehrávača Yahoo je zadarmo. Ak ho chcete použiť vložte uvedenú časť JavaScriptu v spodnej časti webovej stránky: <script type=“text/javascript“ src=“http://mediaplayer.yahoo.com/js“> </ script> Potom stačí pridať odkaz na vaše MP3 súbory vo vašom HTML a kód JavaScript automaticky vytvorí tlačidlo Play pre každú pieseň:
<a href="song1.mp3"> Play Song 1 </ a> <a href = "song2.mp3 "> Play Song 2 </ a> ... ... ...
Yahoo Media Player sa na stránke predstaví malým tlačidlom play namiesto plného prehráčav. Avšak, keď kliknete na tlačidlo, plný prehrávač vyskočí. Všimnite si, že prehrávač je vždy ukotvený a je pripravený v spodnej časti okna. Stačí kliknúť na neho a vysunie sa.
3.5.6. Použitie hypertextového odkazu
Ak webová stránka obsahuje hypertextový odkaz na mediálny súbor, bude väčšina prehliadačov používať „pomocnú aplikáciu“ pre prehratie súboru.
Nasledujúci fragment kódu zobrazí odkaz na mp3 súbor. Ak používateľ klikne na odkaz, prehliadač spustí pomocnú aplikáciu pre prehrávanie súboru:
<a href="horse.mp3">Play the sound</a>
3.5.7. Inline Sound
Ak je zvuk zahrnutý do webovej stránky, alebo ako súčasť webovej stránky, nazýva sa inline zvuk.
Ak plánujete používať vložené zvuky vo vašich webových aplikáciách, uvedomte si, že veľa ľudí považuje inline zvuky za otravné. Tiež si všimnite, že niektorí používatelia si vypínajú inline voľbu zvuku vo svojom prehliadači.
Naše najlepšia rada je, aby ste použili inline zvuk iba na webových stránkach, kde užívateľ očakáva zvuk. Príkladom toho je stránka, ktorá sa otvorí po kliknutí užívateľa na odkaz „vypočuť nahrávku“.
3.6. Prehrávanie videa vo formáte HTML
Videá je možné prehrávať vo formáte HTML v mnohými rôznymi spôsobmi. Problémy sú azda ešte väčšie ako v prípade zvuku vzhľadom na veľký počet rôznych formátov a kódovaní.
3.6.1. Použitie Tagu <embed>
Účelom značky <embed> je vložiť multimediálne prvky v HTML stránkach.
Nasledujúci HTML fragment zobrazuje Flash video vložené na webovej stránke:
<embed src="intro.swf" height="200" width="200"/>
Problémy:
- Tag <embed> nie je známy v HTML 4. Vaša stránka nebude správne overená.
- Ak prehliadač nepodporuje Flash, nebude vaše video prehrané.
- iPad a iPhone neumožňuje zobraziť Flash videa.
- Ak prevediete video do iného formátu, neznamená to ešte že bude hrať vo všetkých prehliadačoch.
3.6.2. Použitie Tagu <object>
Účelom tagu <object> je vložiť multimediálne prvky v HTML stránkach.
Nasledujúci HTML fragment zobrazuje Flash video vložené na webovej stránke:
<object data="intro.swf" height="200" width="200"/>
Problémy:
- Ak prehliadač nepodporuje Flash, nebude vaše video prehrané.
- iPad a iPhone neumožňuje zobraziť Flash videa.
- Ak prevediete video do iného formátu, neznamená to ešte že bude hrať vo všetkých prehliadačoch.
3.6.3. Použitie Tagu <video>
Element <video> je len v HTML 5. Účelom tagu <video> je vložiť prvky videa v HTML stránkach.
Nasledujúci fragment HTML zobrazí video vo formáte ogg, mp4, alebo WebM formáte vloženého do webovej stránky:
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Vas webovy prehliadac nepodporuje tag video. </video>
Problémy:
- Musíte previesť videa do rôznych formátov.
- Element <video> nefunguje v starších prehliadačoch.
- Element <video> sa neoveruje v HTML 4 a XHTML.
3.6.4. Najlepšie HTML riešenie
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
Vyššie uvedený príklad používa 4 rôzne formáty videa. HTML 5 tag <video> sa pokúsi prehrať video buď v mp4, ogg, alebo WebM formáte. Ak sa to nepodarí, kód nakoniec vyskúša prvok <object>. Ak to tiež zlyhá, vyskúša sa ešte tag <embed> .
Problémy:
- Musíte previesť videa do rôznych formátov.
- Element <video> sa neoveruje v HTML 4 a XHTML.
- Element <embed> sa neoveruje v HTML 4 a XHTML.
Poznámka: Použitie sa rieši overením <DOCTYPE html> v hlavičke.
3.6.5. Použitie hypertextového odkazu
Ak webová stránka obsahuje hypertextový odkaz na mediálny súbor, bude väčšina prehliadačov používať „pomocnú aplikáciu“ pre prehratie súboru. Nasledujúci fragment kódu zobrazuje odkaz na Flash video. Ak používateľ klikne na odkaz, prehliadač spustí pomocnú aplikáciu, ako je Windows Media Player pre prehranie súboru AVI:
<a href="intro.swf">Play a video file</a>
3.6.6. Prehrávanie videa YouTube vo formáte HTML
Ak chcete zobraziť video na webovej stránke, môžete nahrať video na YouTube a vložiť HTML kód pre zobrazenie videa vo vašej webovej stránke. Je to najpohodlnejší a azda najlepší spôsob prehrávania videa v HTML.
YouTube s použitím tagu <iFrame>
<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>
YouTube s použitím tagu <Embed>
<embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash"> </embed>
