Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Beágyazott elemek /<video>, <source> – videó állományok beillesztésére

Beágyazott elemek (II. rész)

<video>, <source> – videó állományok beillesztésére

Mire használjuk?

A tag segítségével videót ágyazhatunk be az oldalunkra. Újdonság, hogy a HTML5 szabványt támogató böngészők alapértelmezetten támogatják a videóállományok lejátszását. Sajnos azonban a formátumok esetén ugyanaz a helyzet, mint amit a hangállományoknál is tapasztaltunk, vagyis az egyes webböngészők más-más formátumokat támogatnak, ezért ugyanazt a videót többféle formátumba is át kell konvertálnunk, és meg kell adnunk forrásként.

A böngészők által támogatott formátumokat az alábbi táblázatban találjuk:

Böngésző

MP4

WebM

Ogg

Internet Explorer 9+

Igen

Nem

Nem

Chrome 6+

Igen

Igen

Igen

Firefox 3.6+

Nem

Igen

Igen

Safari 5+

Igen

Nem

Nem

Opera 10.6+

Nem

Igen

Igen

Megjegyzés

A fenti táblázat a tananyag írásának időpontjában fennálló helyzetet tartalmazza, a formátumok böngészőtámogatottsága változhat az idő múlásával.

Tanulási tipp

A videóállományok átalakítására minden operációs rendszerre találhatunk megfelelő alkalmazásokat, de on-line is elvégezhetjük az átalakítása a Online-Convert.com weboldalon.

A <video> tag paraméterei:

A <source> tag paraméterei:

Forrás

A most következő példáinkban az ELTE Erasmus képzéséről szóló videó egy részletét használtuk fel.

Videóállomány beillesztése vezérlő megjelenítésével

Példa

Forráskód
<video controls>
 <source src="videok/erasmus_reszlet.mp4" type="video/mp4">
 <source src="videok/erasmus_reszlet.ogv" type="video/ogg">
 <source src="videok/erasmus_reszlet.webm" type="video/webm">
<!-- Régebbi böngészőben történő lejátszást támogató fallback ide kerülne -->
 <p>A böngészője nem támogatja a videóállomány beágyazott lejátszását.</p>
 <p><a href="videok/erasmus_reszlet.mp4">Az erasmus_reszlet állományt letöltheti mp4 formátumban.</a></p>
</video>
Magyarázat

Az <video> taghez írt controls paraméternek köszönhetően a böngészőben megjelenik a vezérlő eszköztár (amennyiben a böngésző támogatja ezt a funkciót.) Ezek után három különböző formátumban linkeltük be az állományokat a <source> tag segítségével, amelyben a type paramétert is megadtuk a kívánt formában.

Azon felhasználókra is gondolnunk kell, akik olyan böngészőt használnak, ami még nem támogatja a HTML5 video tagjét. Számukra kiírjuk, hogy a böngésző nem támogatja ezt a funkciót, és letöltésre felkínáljuk az mp4 változatot. Látható, hogy ezt az üzenetet egyszerűen az <video> és </video> tagek közt bekezdésekben helyeztük el.

Még jobb, ha olyan fallbacket biztosítunk, amely lehetővé teszi a régebbi böngészőkben történő, beágyazott videólejátszást is. Az <audio> tag bemutatásánál felsorolt médialejátszók alkalmasak lehetnek erre is.

Vissza a tartalomjegyzékhez

Videó beszúrása a preload, loop, muted, autoplay paraméterekkel

Példa
Megjegyzés

A preload, loop, muted, autoplay paraméterek hasonlóan működnek, mint ahogy azt az <audio> tagnél bemutattuk, így itt most ezekre nem hozunk különálló példákat, az alábbi interaktív példában az összes ilyen paramétert beillesztettük, ezek hatását egyszerűen letesztelhetjük.

Interaktív példa

Vissza a tartalomjegyzékhez

Videóállomány beszúrása méret megadással és a poster paraméter használatával

Példa

A beillesztett videóállomány fizikai mérete 720x480 volt. A width és height paraméterrel az eredeti mérettől eltérő méretben is beszúrhatjuk a videót. A következő példában felére fogjuk csökkenteni a méretet.

Forráskód
<video controls width="360" height="240" poster="video/erasmus.png">
 <source src="videok/erasmus_reszlet.mp4" type="video/mp4">
 <source src="videok/erasmus_reszlet.ogv" type="video/ogg">
 <source src="videok/erasmus_reszlet.webm" type="video/webm">
<!-- Régebbi böngészőben történő lejátszást támogató fallback ide kerülne -->
 <p>A böngészője nem támogatja a videóállomány beágyazott lejátszását.</p>
 <p><a href="videok/erasmus_reszlet.mp4">Az erasmus_reszlet állományt letöltheti mp4 formátumban.</a></p>
</video>
Kapcsolódó ergonómiai elvek

Nagyon fontos, hogy a videóhoz olyan előképet válasszunk, ami jól jellemzi a videót. Ezzel felkelthetjük az érdeklődést, illetve egy jól megválasztott kép segítheti a felhasználókat abban, hogy azonosítsák azon videókat, amelyeket esetleg korábban már láttak.

Kapcsolódó ergonómiai elvek

Attól, hogy a videó méretét a width és height paraméterekkel csökkentjük, attól még a böngészőnek az eredeti állományt kell letöltenie, így a letöltés lassú lehet. Ilyenkor érdemes lehet a videót fizikailag is átméretezni és azt beilleszteni az oldalra, a nagyobb változatra pedig hivatkozást is elhelyezhetünk.

Vissza a tartalomjegyzékhez

Videók szinkronizált beillesztése

A hangállományok tárgyalásánál már láttuk, hogy lehetőség van arra, hogy a mediagroup paraméterrel olyan csoportot hozzunk létre, amelyet aztán szinkronizáltan tudunk lejátszani.

Ugyanez működik a videók esetén is.

Nagyon előnyös ez a funkció, ha például olyan felvételt akarunk közzétenni, amely több kameraállásból mutatja be ugyanazt a cselekményt, vagy tartozik hozzá jelnyelvi tolmácsolás.

Kapcsolódó akadálymentességi elvek

A videók akadálymentesítésénél is nagyon jól kihasználhatjuk a médiacsoportban rejlő lehetőségeket. Megtehetjük például, hogy a videót és egy hangállományt csoportosítunk, ahol a hangállomány olyan kommentárokat tartalmaz, amely segíti a vak látogatókat abban, hogy a videó tartalmába részletes betekintést nyerjenek. Ebben az esetben az audió kommentár olyan plusz információkat tartalmaz, amely pusztán a narráció és a párbeszédek szövegéből nem derülne ki.

Kapcsolódó akadálymentességi elvek

A siket felhasználók számára nagyon előnyös, ha a videóhoz jelnyelvi tolmácsolást is biztosítunk. A médiacsoportban rejlő lehetőségeket itt is kihasználhatjuk, hiszen összecsoportosíthatjuk a videót a hozzá tartozó jelnyelvi tolmácsolás videójával.

Magyarországon is (szerencsére) egyre többször láthatjuk, hogy (főleg) közszolgálati műsorok esetén a siket nézők számára a jeltolmácsolás is biztosított. Ez nagyon helyes, és a webes világban is jó lenne erre törekedni.

A következő példánkban az MTV Híradójának egy részletét mutatjuk be úgy, hogy különválasztottuk a jelnyelvi tolmács képét a híradó bemondójától, tehát két külön videóállományunk jött létre. Ezt a két állományt a HTML5 lehetőségeivel az oldalba illesztettük, és a lejátszást szinkronizálttá tettük.

Forrás

Példánkban a Híradó 2013. július 17-i adását használtuk fel.

Láthatjuk, hogy a két videó szinkronizáltan kerül lejátszásra. A jelnyelvi videót egyébként vonszolhatóvá tettük, így a helyzete megváltoztatható.

Interaktív példa
Magyarázat

A videók beillesztése a korábban bemutatott módon történik, annyi különbséggel, hogy mindkét videó esetén használtuk a mediagroup paramétert, ugyanazon értékkel (mediagroup="video").

Hogy a jelnyelvi videó vonszolható legyen, egy kis jQuery-trükkhöz folyamodtunk.

Ha a böngészőprogramjában a fenti szinkronizált lejátszás nem működik, akkor az alábbi animációban nyomon követhetjük, hogy minek kellett volna történnie:

Az animáció azt mutatja be, hogy két videó egymással szinkronizált módon is lejátszható.

Flash lejátszó letöltése

Videók (együttes) szinkronizált lejátszása

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.