Videó beágyazása HTML-ben

A <video> elem segítségével videókat jeleníthetünk meg közvetlenül a weboldalon. A modern HTML szabvány támogatja a natív videólejátszást, külső bővítmények nélkül.

Alap videó beágyazás

Egy egyszerű videó beágyazásához használjuk a <video> elemet, benne egy vagy több <source> elemmel. A 'controls' attribútummal vezérlőgombokat jeleníthetünk meg a lejátszáshoz.

Gyakori attribútumok

A <video> elemhez számos hasznos attribútum társítható: - 'controls' – lejátszó gombokat jelenít meg - 'autoplay' – automatikusan elindítja a videót - 'muted' – némítva indítja el a videót - 'loop' – újraindítja a lejátszást a végén - 'poster' – előnézeti képet jelenít meg a betöltés előtt.

Több formátum támogatása

Mivel nem minden böngésző támogatja ugyanazokat a formátumokat, célszerű több <source> elemet megadni különböző fájlformátumokkal (pl. MP4, WebM, OGG). A böngésző automatikusan a legelsőt választja, amit támogat.

Hozzáférhetőség és kompatibilitás

Mindig adj meg szöveges fallbackot a <video> elemen belül arra az esetre, ha a böngésző nem támogatná a videót. Emellett használj 'title' attribútumot vagy alternatív szöveget, ha a videó fontos információt hordoz.

Gyakorlati tanácsok

A videófájlokat érdemes tömöríteni és optimalizálni a gyors betöltés érdekében. Nagyobb fájlok esetén használj külső szolgáltatásokat (pl. YouTube vagy saját CDN). Továbbá fontos lehet a szöveges feliratok vagy alternatív tartalom biztosítása is.