Médiaelemek HTML-ben

A HTML támogatja multimédiás tartalmak, például hangfájlok és videók beágyazását közvetlenül az oldalba. Ehhez két fő elemet használunk: <audio> és <video>.

Hang beágyazása – <audio>

A <audio> elem lehetővé teszi MP3, OGG vagy WAV fájlok beágyazását. A 'controls' attribútum biztosítja a lejátszó felületet, amelyen keresztül a felhasználó elindíthatja, megállíthatja vagy visszatekerheti a hangot.

Videó beágyazása – <video>

A <video> elem lehetőséget nyújt videók lejátszására az oldalon. Használhatjuk a 'controls' attribútumot a lejátszó megjelenítéséhez, valamint további beállításokat is, például 'autoplay', 'muted' vagy 'loop'.

Gyakori attribútumok

Az <audio> és <video> elemekhez több attribútum is tartozik. A 'controls' megjeleníti a lejátszót, az 'autoplay' automatikusan elindítja a médiát, a 'muted' némítja azt, míg a 'loop' ismétli a lejátszást.

Támogatott fájlformátumok

A legelterjedtebb formátumok közé tartozik az MP3, OGG és WAV hanghoz, valamint az MP4, WebM és OGV videóhoz. Fontos, hogy több formátumot is megadjunk, ha különböző böngészőket szeretnénk támogatni.

Tartalom a támogatás nélküli böngészőkhöz

A <audio> és <video> elemek belsejébe írt szöveg megjelenik azokban a böngészőkben, amelyek nem támogatják ezeket az elemeket. Ez lehet figyelmeztetés vagy letöltési link a médiához.

Gyakorlati tanácsok

Mindig használj több <source> elemet, hogy a lehető legtöbb böngésző támogassa a médiát. A fájlokat célszerű optimalizálni, hogy gyorsan betöltődjenek, és figyelj arra is, hogy a felhasználói élmény kellemes és egyértelmű legyen.