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.
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ő.
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 |
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.
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:
<source src="pelda.mp3" type="audio/mpeg">
<source src="pelda.ogg" type="audio/ogg">
<source src="pelda.wav" type="audio/wav">
<source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src="pelda.mp4">
<source type='video/ogg; codecs="theora, vorbis"' src="pelda.ogv">
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. :-)
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!
<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>
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.
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.
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:
<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>
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.
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.
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.
A hangállomány szöveges átiratának megtekintése
<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>
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.
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.
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
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.
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.
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.
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)
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!
Az alábbi példában a hangállomány pufferelési módjait lehet kipróbálni.
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.
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 )
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.
<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>
  |
 |
 |
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.