Az ezen videó lejátszásának HTML5-be való beágyazása egyszerűbb. Ehhez a video elemet használjuk.
Itt látható egy példa arra, hogyan lehet beágyazni ezt az video elemet:
<video src="video.ogv" width="300" height="200"> A böngészője sajnos nem támogatja az HTML5-öt </video>
Ez a legegyszerűbb módszer. Ennek a szintaxisnak három attribútuma azonban döntő. A src attribútummal adható meg a beillesztendő videó. Mindenképpen figyelj a megfelelő elérési útra. A két attribútum, a width és a height meghatározzák a videó szélességét és magasságát. Ha egyik értéket sem adunk meg, akkor a videó az eredeti méretében jelenik meg. Ha csak az egyik értéket jegyezzük meg, a böngésző automatikusan kiszámolja a másik értéket. Az autoplay attribútum arra utasítja a böngészőt, hogy automatikusan indítsa el a videót, amikor az oldal betöltődött. Ezt az attribútumot általában nem kell beállítani, mivel a felhasználók általában nem szeretik az automatikus lejátszást. Ez különösen igaz azokra a felhasználókra, akik kevés sávszélességgel rendelkező mobil eszközöket használnak.
Egy további érdekes attribútum a controls. Ha ezt használod, a böngészőben a lejátszás és a hangerő szabályzó gombok lesznek láthatóak.
<video src="video.ogv" width="300" height="200" controls> A böngészője sajnos nem támogatja az HTML5-öt </video>
Az alább látható a böngészőben:
A megjelenő vezérlősávon nem csak megállíthatod és újraindíthatod a videót, hanem a hangerőszabályzás is ott található.
Az poster attribútum segítségével egy képet adhatsz meg a videó elindulásáig. Ehhez a poster attribútumot használd.
<video src="video.ogv" width="300" height="200" poster="video.gif"> A böngészője sajnos nem támogatja az HTML5-öt </video>
Itt is ügyelj a helyes elérési útra, hogy a kép valóban megjelenjen.
Az autoplay attribútum használatakor legyetek óvatosak. Mert ez az attribútum azt határozza meg, hogy a videó automatikusan lejátszódjon, amint elérhetővé válik.
<video src="video.ogv" width="300" height="200" autoplay> A böngészője sajnos nem támogatja az HTML5-öt </video>
A preload attribútum a forgalom szempontjából érdekes lehet. Mert ez az attribútum szabályozza a előtöltési viselkedést. Az attribútum a következő értékeket kaphatja meg:
• auto – A böngésző a teljes fájlt előtöltheti.
• none – A fájlt nem kell előtölteni.
• metadata – A fájl előtölthető.
Ha hiányzik a preload attribútum, akkor a böngésző alapbeállításait használja.
Videók és a kodekek
Azok, akik videók beágyazásával és lejátszásával foglalkoznak weboldalakon, előbb-utóbb szembesülnek azzal a problémával, hogy különböző kodecekkel. Ezek a kodecek lehetővé teszik a videók hatékony tömörítését és tömörítését. A probléma az, hogy a böngészőgyártók mindeddig nem tudtak megállapodni egy közös kodek formátumról. Az HTML5 (és így végső soron ti számotokra) azt jelenti, hogy nincsenek egységes kodecek a videók és hangfájlok számára.
A videók esetében a két formátum, az Ogg és az MP4 már jól meghatározottak. Ezért általában biztonságosnak tekinthető, ha a videót ezen két formátumban kínáljuk. Ehhez a video elemhez két source elemet rendelünk hozzá.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Tehát nem a video forrását adod meg a video elemen belül. Ehelyett csak általános információkat szolgáltatsz a megjelenítésről. Hogy melyik videót kell megjeleníteni, azt a source elemen keresztül határozod meg. A megfelelő videofájlt a src attribútumra mutatsz be. A type után pedig megadod, hogy milyen típusú videóról van szó, vagy milyen formátumban van a videó rendelkezésre.
Ha több source elem van megadva, a böngésző mindig az első olyan videót játsza le, amely "megfelel". Hogy miért fontos ez a "megfelel" megjelölés, az alább lesz részletezve.
De vajon melyik böngésző támogatja melyik formátumot? Erre a kérdésre választ ad az alábbi táblázat.
| Böngésző | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Változattól 9 | |
| Mozilla Firefox | Igen | |
| Google Chrome | Igen | Igen |
| Opera | Igen | |
| Safari | Igen | |
| iPhone | Igen | |
| Android | Igen |
A táblázat jól szemlélteti a dilemmát: A formátumok értelmezése szinte minden böngészőre egyenletesen eloszlik. Ezért gyakorlatilag kényszert érezhetünk arra, hogy mindkét formátumot megadjuk.
Az media attribútum segítségével, ami kizárólag a source elemhez rendelhető, nyilváníthatod meg, hogy a videó milyen médiumhoz alkalmas. A készülékek specifikus videóknál a src -hoz kell hozzárendelned az media attribútumot. Ezzel az media attribútummal a kívánt médiumtípust adod meg.
<video width="400" height="300">
<!-- Csak mobileszközökre -->
<source src="video_mobil.ogg" media="handheld" />
<!—Minden egyéb eszköz -->
<source src="video_normal.ogg" media="all" />
</video>
A media attribútum segítségével ellenőrizhető, hogy egy mobil eszközről van-e szó. Ebben az esetben egy kisebb méretű videó lesz lejátszva. Ha egyéb eszközről van szó, akkor az "all" értéket használjuk.
Biztonságos videó beillesztés
Az ismert HTML5 jelenleg még nem minden böngésző által támogatott. Ez természetesen vonatkozik a video elemre is. Egy megoldást kínál a különböző beillesztési technikák kombinálása. Az ismert object és embed elemeket összekapcsoljuk a video elemmel. Így nézhet ki ez:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Ezen módon beillesztett videók lejátszhatóak lesznek a legtöbb böngészőben. Azok a böngészők, amelyek ismerik a video elemet, ehhez fognak nyúlni. A másik böngészők pedig az object vagy az embed elem adatait használják.
