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

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

MP4 = MPEG 4 állomány H264 videó kódolással és AAC audió kódolással
WebM = WebM állomány VP8 videó kódolással és Vorbis audió kódolással
Ogg = Ogg állomány Theora videó kódolással és Vorbis audió kódolással

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:

globális attribútumok
src: a videóállomány forrása (opcionális). Előnyösebb, ha nem a <video> tagnél, hanem a <source> tag használatával, szintén az src paraméter kitöltésével adjuk meg a forrást.
autoplay: ezzel a logikai attribútummal elérhetjük, hogy a hangállomány automatikusan elinduljon betöltődéskor.
preload: A preload attribútummal adhatjuk meg a böngészőnek, hogy a felhasználó számára melyik pufferelési technika lenne az ideális. Ha az autoplay attribútum használatban van, akkor a preload figyelmem kívül lesz hagyva. A preload értékei:
- auto: a hanganyag letöltése fontos, még akkor is, ha a felhasználó nem kattint rá a lejátszás gombra.
- metadata: nem szükséges pufferelni a hanganyagot, elég a metaadatok (pl. hang hossza) lekérése.
- none: ezzel jelezhetjük, hogy az audio állományt nem szükséges pufferelni.
poster: A poster attribútum segítségével beállítható, hogy mi legyen a kezdőkép. Például akkor lehet szükség rá, amikor nem indul el a videó automatikusan és csak egy fekete négyzet látszik a helyén vagy a videó legelső képe semmitmondó és egy másik kép megfelelőbb.
loop: logikai attribútum. Amennyiben szerepel, akkor a videóanyag végtelenítve játszódik le, vagyis miután elérte a végét, újrakezdi az elejétől.
muted: logikai attribútum, azt állíthatjuk be, hogy a videolejátszó alapesetben legyen elnémítva.
controls: logikai attribútum. Akkor érdemes használni, ha a böngészőprogram által biztosított eszköztárat szeretnénk felkínálni a felhasználóknak, nem pedig mi oldjuk meg scriptek segítségével a videó lejátszását, megállítását, hangerőváltoztatást, stb.
width: a videó a megadott szélességben jelenik meg.
height: a videó a megadott magassággal jelenik meg.
mediagroup: Lehetővé teszi több hang- illetve videósáv egyszerre történő, szinkronizált lejátszását. Ez azt jelenti (hogy ha a böngésző támogatja), az egyik médiaelem lejátszásakor a másik is automatikusan lejátszódik az adott pozíciótól. Ehhez annyit kell tennünk, hogy az egyszerre lejátszandó médiaelemeknél ugyanazt a mediagroup értéket adjuk meg (lásd a későbbi példánkat).

A <source> tag paraméterei:

globális attribútumok
src: a videóállomány forrása
type: a videóállomány típusát írhatjuk le. Itt az adott videóformátum mime-típusát írhatjuk le, illetve még pontosabban azt, hogy milyen kodek lett használva a videófájl konvertálásakor.
- mp4 esetén a mime típus: video/mp4. Pl.
```
 <source src="pelda.mp4" type="video/mp4">
```
- ogg, ogm, ogv esetén a mime típus: video/ogg. Pl.
```
 <source src="pelda.ogv" type="video/ogg">
```
- webm esetén a mime típus: video/webm. Pl.
```
 <source src="pelda.webm" type="video/webm">
```
- Komplexebb példák
  - ```
   <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src="pelda.mp4">
```
- ```
<source type='video/ogg; codecs="theora, vorbis"' src="pelda.ogv">
```

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.

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

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Videó szinkronizált lejátszása</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#jelnyelvi_tolmacs" ).draggable();
});
</script>
<style type="text/css">
#jelnyelvi_tolmacs {position:absolute; top:0; right:0;}
</style>
</head>
<body>
<video controls mediagroup="hirado">
 <source src="videok/hirado.webm" type="video/webm">
 <source src="videok/hirado.ogv" type="video/ogg">
 <source src="videok/hirado.mp4" type="video/mp4">
 <p>A böngészője nem támogatja a videóállomány HTML5 szabvány szerinti beágyazott lejátszását.</p>
 <p><a href="videok/hirado.mp4">A hirado állományt letöltheti mp4 formátumban.</a></p>
</video> 
<video id="jelnyelvi_tolmacs" controls mediagroup="hirado">
 <source src="videok/hirado_jelnyelv.webm" type="video/webm">
 <source src="videok/hirado_jelnyelv.ogv" type="video/ogg">
 <source src="videok/hirado_jelnyelv.mp4" type="video/mp4">
 <p>A böngészője nem támogatja a videóállomány HTML5 szabvány szerinti beágyazott lejátszását.</p>
 <p><a href="videok/hirado_jelnyelv.mp4">A hirado_jelnyelv állományt letöltheti mp4 formátumban.</a></p>
</video> 
</body>
</html>

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:

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

Vissza a tartalomjegyzékhez

Fel a lap tetejére

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.