HTML Info

Webről, magyarul, mindenkinek

A HTML5 video eleme

nincs megjegyzés

A készülőfélben lévő HTML 5 lehetővé teszi (majd és már) audió és videó erőforrások közvetlen beágyazását a weblapba. Mondani sem kell, mit jelent ez – viszlát pluginek, viszlát pluginletöltésre buzdító vírusok. Nézzük át a Mozilla Developer Center leírása alapján, hogyan működik.

A HTML 5 audio és video elemeinek támogatását a Firefox 3.5-ös verziótól vezették be. Jelenleg az Ogg Theora, Ogg Vorbis, és WAV formátumú médiafájlokat támogatja.

Média beágyazása

Médiatartalom beágyazása a HTML dokumentumba végtelenül egyszerű:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
A böngésző nem támogatja a <code>video</code> elemet.
</video>

A fenti példakód a Theora webhelyéről játszik le egy példavideót.

A source elem használatával több forrásfájl is megadható, hogy a különböző kódolásokat támogató böngészőkhöz különbözőformátumokat tudjunk szolgáltatni:

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
A böngésző nem támogatja a <code>video</code> elemet.
</video>

Tehát, ha a böngésző támogatja az Ogg formátumot, akkor az ogg formátumú videó fog betöltődni; ha nem, az MP4.
Megadhatjuk a médiafájl által megkövetelt codecet is; így a böngésző még több szempont alapján képes választani.

<video controls>
<source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
A böngésző nem támogatja a <code>video</code> elemet.
</video>

Vagyis, megadtuk, hogy a videó Dirac és Speex codeceket használ. Ha a böngésző támogatja ugyan az Ogg formátumot, de a megadott codecet nem, a videó nem töltődik be.
Ha a type attribútum nincs megadva, akkor letöltődés után a Gecko megvizsgálja, hogy tudja-e kezelni; ha nem, megnézi a következőnek megadott forrásfájlt. Ha egyik megadott forrásfájl sem használható, akkor error esemény ébred. Ha a type attribútum meg van adva, akkor a Gecko összehasonlítja az általa lejátszani képes típusokkal; ha nem ismeri fel, magát a médiafájlt már le sem kéri a szerverről, hanem megnézi a következőnek megadott forrásfájlt.

Lejátszás vezérlése

Miután az új elem használatával beágyaztuk a videót a weblapba, némi JavaScript kóddal vezérelhetjük működését. Például elindítani (vagy újraindítani) a következőképp tudjuk:

var v = document.getElementsByTagName("video")[0];
v.play();

Média események

A médiafájlok kezelése közben ébred(het)ő események:

Esemény neve Leírás
abort Akkor ébred, ha a lejátszás megszakad. Például, ha médiafájl lejátszás közben újraindul.
canplay Akkor ébred, ha elegendő adat áll rendelkezésre a lejátszáshoz, legalábbis néhány frame rendelkezésre áll. Megfelel a CAN_PLAY readyState állapotnak.
canplaythrough Akkor ébred, ha a kész állapot CAN_PLAY_THROUGH állapotra változik, jelezve, hogy a teljes médiafájl megszakítás nélkül lejátszható, feltételezve, hogy a sávszélesség legalábbis a jelenlegi marad.
canshowcurrentframe Az aktuális frame betöltődött és megjeleníthető. Megfelel a CAN_SHOW_CURRENT_FRAME readyState állapotnak.
dataunavailable Akkor ébred, ha a kész állapot DATA_UNAVAILABLE állapottra változik.
durationchange A metadata betöltődött vagy megváltozott, jelezve, hogy megváltozott a médiafájl hossza. Például akkor ébred. ha a médiafájl már annyira betöltődött, ha hossza már megállapoítható.
emptied A média üressé vált; például, az esemény akkor ébred, ha a médiafájl már betöltődött (vagy részben betöltődött), és a load() eljárás meghívódott, hogy újra betöltse.
empty Akkor ébred, ha hiba történt, vagy a médiafájl üres.
ended Akkor ébred, ha a lejátszás befejeződött.
error Akkor ébred, ha hiba történt.  Az elemerror attribútuma tartalmaz további információt.
load A médiafájlt letöltése befejeződött.
loadedfirstframe A média első frame-jének betöltése befejeződött.
loadedmetadata A média metaadatainak betöltése befejeződött; minden attribútum annyi hasznos információt tartalmaz, amennyire képes.
loadstart Akkor ébred, ha a média töltése elkezdődött.
pause Akkor ébred, ha a lejátszás szünetel.
play Akkor ébred, ha a lejátszás kezdődik, vagy újraindul.
ratechange Akkor ébred, ha a lejátszási sebesség megváltozik.
seeked Akkor ébred, ha a keresési művelet befejeződött.
seeking Akkor ébred, mikor a keresési művelet elkezdődik.
timeupdate Az elem currentTime attribútuma által jelzett idő megváltozott.
volumechange Akkor ébred, ha az audió hangereje megváltozik (akkor is, ha hangerőváltozás történik, és akkor is, ha a muted attribútum megváltozik).
waiting Akkor ébred, ha a kívánt művelet (pl. lejátszás) késik, másik művelet (pl. keresés) befejezésére várakozás miatt.

Az események könnyedén nyomon követhetők a következőhöz hasonló kód használatával:

var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() {
  document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

A példa kikeresi az első video elemet a HTML dokumentumban és hozzácsatol egy eseményfigyelőt, amely a keresett eseményt lesi. Az esemény jelen esetben egy keresés vége (seeked) művelet, amely akkor ébred, ha a keresés befejeződött. A figyelő ekkor meghívja az elem play() eljárását, ami elindítja a lejátszást.
Aztán, a 4. sorban a példa beállítja az elem currentTime attribútumának értékét 10.0 értékre, amely keresés (seek)
műveletet indít, megcélozva a médiafájl 10. másodpercét. Ennek hatására keresés esemény ébred, amikor a művelet kezdődik, aztán a seeked esemény játszódik le, amikor a keresés befejeződött.
Más szavakkal, a példa megkeresi a médiafájl 10. másodpercét, aztán azonnal elkezdi a lejátszást.


A HTML 5 lehetőségeivel kapcsolatos kísérletek a html5 könyvtárban, a video elemmel kísérletezgetések a html5-video oldalon érhetők el.

Írta: htmlinfo

2009. 08 23 at 7:10 pm

Megjegyzés hozzáfűzése