Videó beágyazás HTML5-tel

Korábbi változatában a mozgóképeket <object> tag-ek között elhelyezve lehetett beágyazni az oldalba. Ahhoz, hogy a videó megtekinthető legyen a felhasználónak magának kellett gondoskodnia arról, hogy a böngészőjéhez a megfelelő bővítmény telepítve legyen.

A HTML5 által szabványosított <video> tag által nincs szükség további pluginek használatára és CSS-sel megformázható. Figyelni kell a videó kódolására, mivel különböző böngészők más kódolási eljárást használnak.

• Az egyik a WebM Project, melyet a Chrome, Opera és Firefox is támogat. Ennek a létrehozásával a jogdíjmentes videó formátum létrehozása volt a cél, így bárki számára hozzáférhető. Fájlkiterjesztés: .webm.
• Másik jogdíjmentes formátum a Theora. Ezt a Xiph.org Alapítvány fejleszt az Ogg projekt keretében. Fájlkiterjesztés: .ogv, .ogg
• A H.264 MPEG MPEG konténer formátum, a Safari, Chrome és Internet Explorer által támogatott, nem jogdíjmentes. Kiterjesztése: .MP4.

Egyszerre több fájlt is meg lehet adni külön <video> tag-ek között, amennyiben több videó, valamint audió sávba konvertáljuk a mozgóképet, hogy minden böngészőből elérhető legyen.

<video src="video.ogg" controls="controls" type="video/ogg" width="300" height="200" preload="none" >
Böngészője nem támogatja a videó lejátszását.
</video>

src – a fájl megadásának helye, elérési útvonallal

controls – irányító elemeket is megjeleníti

type – video típusa

width – megjelenített video ablak szélessége, érdemes megadni

height – megjelenített video ablak magassága, érdemes megadni

preload – előre letöltés, értéke lehet: none, metadata (automatikusan letöltődnek a videó tulajdonságai), auto (teljes tartalom automatikus letöltése)

A <video> tag-ek közötti szöveg azok számára fog megjelenni, akiknek a böngészőjében nem támogatott a megadott videó lejátszása.

Egyéb paraméterek, amelyeket meg lehet adni:

autoplay – a lejátszás automatikusan elindul, nincsen értéke

loop – a video végtelenített lejátszása, szintén nem kell értéket adni

poster – kép adható meg, értéke a fájl elérési útja, fájlnév és kiterjesztés

muted – hang elnémítása

Érdemes egy videót úgy betenni egy oldalba, hogy preload-dal előre letöltjük, de nem indítjuk el automatikusan a lejátszást, csupán egy figyelemfelkeltő poster-t adjunk meg neki, így a weboldalunk felhasználóbarát marad.