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 /Beágyazott elemek (II. rész)

Beágyazott elemek (II. rész)

A következőkben megismerkedünk azon tagekkel is, amelyek alkalmasak médiaállományok beillesztésére. Előtte viszont érdemes kitérnünk az akadálymentességi szempontokra is.

Kapcsolódó akadálymentességi elvek

A WCAG 2.0 szabvány 1.2-es irányelve kimondja, hogy az idő alapú médiához alternatívákat kell biztosítani.

Ahogy például egy kép esetén megadtuk az alternatív leírást, ugyanezt az audió, videó stb. állományok esetén is meg kell adnunk, de például gondoskodnunk kell a videó feliratozásáról, hangzó leírás készítéséről, illetve teljes szövegű leírásról.

A szabvány legszigorúbb szintje (AAA) már azt is kimondja, hogy a videókhoz jelnyelvi értelmezést is biztosítani kell, a siket felhasználók igényeit kielégítendő.

<audio>, <source> – Hangállomány beillesztése

Mire használjuk?

Audió (hang) állomány beágyazására használhatjuk. Újdonság, hogy a HTML5 szabványt támogató böngészők alapértelmezetten támogatják a hangállományok lejátszását. Sajnos azonban az egyes webböngészők más-más formátumokat támogatnak, ezért ugyanazt a hanganyagot 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ő

MP3

Wav

Ogg

Internet Explorer 9+

Igen

Nem

Nem

Chrome 6+

Igen

Igen

Igen

Firefox 3.6+

Nem

Igen

Igen

Safari 5+

Igen

Igen

Nem

Opera 10+

Nem

Igen

Igen

Megjegyzés

Bizonyára sokan felkapták a fejüket, hogy az internetet amúgy elárasztó, mp3 formátumot miért nem képes támogatni a Firefox és Opera böngésző. A válasz abban keresendő, hogy az mp3 formátum nem nyílt formátum, számos szabadalom védi, és ezen a területen a "játékszabályok" változhatnak az idő múlásával, így érthető, ha bizonyos böngészőgyártók inkább a nyílt formátumok felé fordulnak, mint amilyen az Ogg formátum. Sőt az is előfordulhat, hogy ha az operációs rendszer beépítve támogatja az adott formátumot, akkor az a webböngészőben is lejátszthatóvá válik. Például Windows XP operációs rendszerben a Firefox 23-as változata nem játssza le az mp3 állományt, míg a Windows 7 operációs rendszeren a Firefox 21-es változata igen.

Tanulási tipp

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

Az <audio> tag paraméterei:

A <source> tag paraméterei:

Forrás

A példáinkban szereplő zenét a Dan-O at www.danosongs.com/ oldalról töltöttük le. Egy HTML5-ös tananyaghoz hűen a sok dal közül a Canvas címűt választottuk ki. :-)

Érdekesség

A Canvas elem a HTML5 egyik fő újítása, amely lehetővé teszi, hogy egy olyan vásznat hozzunk létre az oldalon, amelyre aztán rajzolhatunk is, illetve animációkat készíthetünk. Erre később, a beágyazott elemek ismertetésénél néhány példát is bemutatunk!

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

Példa

Forráskód
<audio controls>
 <source src="hangok/danosongs-canvas-9.ogg" type="audio/ogg">
 <source src="hangok/danosongs-canvas-9.wav" type="audio/wav">
 <source src="hangok/danosongs-canvas-9.mp3" type="audio/mpeg">
<!-- 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 hangállomány HTML5 szerinti beágyazott lejátszását.</p>
 <p><a href="hangok/danosongs-canvas-9.mp3">A danosongs-canvas-9 állományt letöltheti mp3 formátumban.</a></p>
</audio>
Magyarázat

Az <audio> 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.

Azon felhasználókra is gondolnunk kell, akik olyan böngészőt használnak, ami még nem támogatja a HTML5 audio tagjét.

Számukra az lenne a megfelelő, hogy a régebbi böngészők által lejátszható módon is beágyazzuk a hangállományt és ha ez a módszer sem jár sikerrel, akkor írunk ki hibaüzenetet és felkínáljuk letöltésre az állományt. A fenti példában nem ez történik (de ezt később pótoljuk), hanem kiírunk egy hibaüzenetet és felkínáljuk letöltésre a hangállomány mp3 változatát.

Megjegyzés

Azt a tevékenységet, hogy gondoskodunk arról, hogy azon böngészőkben is elérhető legyen az adott tartalom, funkció, amelyek nem eléggé korszerűek, angol nyelven fallback-nek hívják, de igazából magyar nyelven is így szoktak rá hivatkozni a webfejlesztők, mivel nincs jó, elterjedt magyar változata.

Megjegyzés

Ha nem a <source> taget használtuk volna az alternatív hangformátumok megadására, hanem az <audio> tag src paraméterét, akkor a fenti példa így nézne ki:

Forráskód
<audio src="hangok/danosongs-canvas-9.ogg" controls>
<!-- 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 ezen hangállomány beágyazott lejátszását.</p>
 <p><a href="hangok/danosongs-canvas-9.mp3">A danosongs-canvas-9 állományt 
letöltheti mp3 formátumban.</a></p>
</audio>
<audio src="hangok/danosongs-canvas-9.wav" controls>
<!-- 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 ezen hangállomány beágyazott lejátszását.</p>
 <p><a href="hangok/danosongs-canvas-9.mp3">A danosongs-canvas-9 állományt 
letöltheti mp3 formátumban.</a></p>
</audio>
<audio src="hangok/danosongs-canvas-9.mp3" controls>
<!-- 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 ezen hangállomány beágyazott lejátszását.</p>
 <p><a href="hangok/danosongs-canvas-9.mp3">A danosongs-canvas-9 állományt 
letöltheti mp3 formátumban.</a></p>
</audio>

FontosEz a megoldás több szempontból is rossz, ne használjuk így az <audio> taget! Ha a böngésző több megadott formátumot is ismer, akkor többször jelenik meg a hangállomány az oldalon, illetve ha a böngésző nem ismeri az <audio> taget, akkor az üzenet és a letöltési link is többször jelenik meg.

Az <audio> tagnél megadott hibaüzenet (A böngészője nem támogatja…) sajnos nem az adott formátum (ogg,wav,mp3) támogatására vonatkozik, hanem magára az <audio> tag támogatására.

Vissza a tartalomjegyzékhez

Hangállomány beillesztése szöveges alternatívával

Kapcsolódó akadálymentességi elvek

Az előbbi példában beágyaztunk egy zenét hangállomány formájában, de ez nem mindenki számára lesz elérhető, gondoljunk csak a siket felhasználókra. A siket felhasználók számára (és mindazok számára, akik technológiai okokból – pl. rossz/hiányzó hangkártya –, vagy egyéb körülmények miatt – hangos környezet – nem hallhatják a hangállományt) szöveges formában is elérhetővé kell tennünk. Ez természetesen egy zene esetén nehézkes lehet, de például a dal szövegét ebben az esetben is elérhetővé tudjuk tenni.

A következő példánkban egy vers akadálymentes beillesztésére mutatunk példát.

Forrás

A példában Komáromi János Dallamok című versét használtuk fel (a költő előadásában), amelyet a http://www.hangosvers.n1.hu/ töltöttünk le. A sok kódolás közben érdemes lehet a többi verset is meghallgatni.

Példa

A hangállomány szöveges átiratának megtekintése

Forráskód
<audio controls>
 <source src="hangok/komaromi_janos_dallamok.ogg" type="audio/ogg">
 <source src="hangok/komaromi_janos_dallamok.wav" type="audio/wav">
 <source src="hangok/komaromi_janos_dallamok.mp3" type="audio/mpeg">
 <p>A böngészője nem támogatja a hangállomány HTML5 szabvány szerinti beágyazott lejátszását.</p>
 <p><a href="hangok/komaromi_janos_dallamok.mp3">A komaromi_janos_dallamok állományt letöltheti mp3 formátumban.</a></p>
</audio> 
<p><a href="hangok/komaromi_janos_dallamok.html">A hangállomány szöveges átiratának megtekintése</a></p> 
Magyarázat

Láthatjuk, hogy olyan linket helyeztünk el az audió állománynál, amely a szöveges átiratra mutat. Vigyázunk, hogy ezt a linket ne az <audio> tagen belül helyezzük el, mert akkor csak akkor lesz látható, ha a böngésző nem támogatja az audio taget.

Vissza a tartalomjegyzékhez

Hangállomány beillesztése régebbi böngészőkkel kompatibilis módon (fallback)

Ahhoz tehát, hogy a hangállomány a régebbi böngészőprogramokban is lejátszható legyen, gondoskodnunk kell arról, hogy alternatív módon (pl. Flash-lejátszó igénybe vételével) is be legyen ágyazva a médiaelem. Ez természetesen nemcsak a hangállományok beszúrására vonatkozik, hanem a később bemutatandó videóállományok beillesztésére is.

Ahelyett, hogy most újra kitalálnánk azt, ami már máshol megbízhatóan működik, nézzünk meg egy olyan médialejátszót, amely teljesíti ezen feltételeket. Az internetes keresőkben számos jó funkcionalitású, ígéretes médialejátszóból választhatunk.

Kapcsolódó akadálymentességi elvek

A médialejátszó alkalmazások választásánál érdemes azt a szempontot is figyelembe vennünk, hogy azon felhasználók, akik nem tudnak egeret használni és csak billentyűzetet használnak (pl. a mozgáskorlátozott felhasználók egy csoportja), azok is elérhessék a vezérlőelemeket, vagyis el tudják indítani a lejátszást, meg tudják állítani, a hangerőt módosíthassák.

Sajnos számos olyan médialejátszó van, amely úgynevezett billentyűzetcsapdát valósít meg, ami azt jelenti, hogy ha egyszer a felhasználó billentyűzettel belenavigált az adott elembe, akkor a billentyűzet használatával nem tud onnan kinavigálni.

A billentyűzettel való elérés fontosságára figyelmeztet minket a WCAG 2.0 szabvány 2. Alapelve 2.1-es irányelve.

2. Alapelv: Működtethetőség – A felhasználói felület részei és a navigáció működőképesek legyenek

Megjegyzés

A következő példáinkban nem alkalmazzuk fallback megoldást, mert (a tanulás szempontjából) most feleslegesen bonyolítaná a kódot és fő célunk elsősorban a HTML5-ös lehetőségek bemutatása.

Vissza a tartalomjegyzékhez

Hangállomány beillesztése vezérlő megjelenítésével, automatikus lejátszással

Példa

Ezt a példát interaktív példaként helyeztük el. Azt kell tapasztalnunk, hogy a kód megtekintése után a hangállomány automatikusan lejátszódik.

Kapcsolódó ergonómiai elvek

Fontoljuk meg, hogy tényleg automatikusan el akarjuk-e indítani a lejátszást, mert nem biztos, hogy a felhasználó kíváncsi a hangállományra.

Ha például egy linket használunk (hangállomány meghallgatása), és a belinkelt oldalra ágyazzuk be a hangállományt, ott már az automatikus lejátszás előnyös lehet, hiszen a látogató azért kattintott a linkre, hogy meghallgassa a hangállományt.

Kapcsolódó akadálymentességi elvek

Az automatikusan elinduló hangok a képernyőolvasó programot használók számára is rendkívül zavaróak lehetnek.

A WCAG 2.0 szabvány 1.4-es irányelvében foglaltakra tehát különösen ügyelnünk kell.

1.4 Irányelv: Megkülönböztethetőség: Könnyítsük meg a felhasználók számára a tartalom érzékelését (látását és hallását), beleértve az előtér és háttér megkülönböztethetőségét

1.4.2 Hangszabályozás: Amennyiben egy weboldal automatikusan hanganyagot játszik le több mint 3 másodpercen keresztül, akkor vagy egy mechanizmus érhető el a hang szüneteltetéséhez, illetve megállításához, vagy a hangerő rendszerfüggetlen szabályozására mód van. (A szint)

Interaktív példa
Gyakorlat

Módosítsd az interaktív példát úgy, hogy ne jelenjen meg az eszköztár. Ekkor van-e lehetőség hangerő módosítására? Próbáld ki a muted és a loop paraméter hatását is!

Vissza a tartalomjegyzékhez

Hangállomány pufferelése

Példa

Az alábbi példában a hangállomány pufferelési módjait lehet kipróbálni.

Interaktív példa
Magyarázat

A preload paraméter none értékre állítottuk be, ami azt jelenti, hogy nem lesz pufferelve a hangállomány. Ha megnézzük az eredményt, látható, a vezérlőeszköztáron a hangállomány hossza sem látható. Változtassuk meg a none értéket metadata értékre! Ekkor már a hangállomány hossza megjelenik. Az auto értéknél szintén, de akkor az állomány pufferelése is megkezdődik, amelynek folyamata általában látható az eszköztáron is.

Vissza a tartalomjegyzékhez

Hangállományok szinkronizált lejátszása

Példa

Az alábbi példában két hangállományt is beillesztettünk. Mindkét <audio> tag esetén használtuk a mediagroup paramétert és ugyanazt az értéket (vers) állítottuk be mindkét esetben.

Ezáltal egy olyan médiacsoportot hoztunk létre, amelyben a lejátszás szinkronizáltan történik. Vagyis, ha elindítjuk az egyik állomány lejátszását, a másik is le fog játszódni (amennyiben ezt a funkciót a böngészőprogram támogatja…)

Forrás

A példában Komáromi János, Dallamok című versét használtuk fel (a költő előadásában), amelyet a http://www.hangosvers.n1.hu/ töltöttünk le.

Forráskód
<audio controls mediagroup="vers">
 <source src="hangok/danosongs-canvas-9.wav" type="audio/wav">
 <source src="hangok/danosongs-canvas-9.ogg" type="audio/ogg">
 <source src="hangok/danosongs-canvas-9.mp3" type="audio/mpeg">
<!-- 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 hangállomány HTML5 szerinti beágyazott lejátszását.</p>
 <p><a href="hangok/danosongs-canvas-9.mp3">A danosongs-canvas-9 állományt letöltheti mp3 formátumban.</a></p>
</audio> 
<audio controls mediagroup="vers">
 <source src="hangok/komaromi_janos_dallamok.wav" type="audio/wav">
 <source src="hangok/komaromi_janos_dallamok.ogg" type="audio/ogg">
 <source src="hangok/komaromi_janos_dallamok.mp3" type="audio/mpeg">
<!-- 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 hangállomány HTML5 szerinti beágyazott lejátszását.</p>
 <p><a href="hangok/komaromi_janos_dallamok.mp3">A komaromi_janos_dallamok állományt letöltheti mp3 formátumban.</a></p>
</audio>

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.