Weboldalkészítő suli #44 - YouTube-videók beágyazása

A múlt hónapban elkészítettünk egy saját lejátszóprogramot a beágyazott HTML5-ös <video>-nkhoz, ami pontosan ugyanúgy nézett ki minden böngészőben, emellett a lejátszás indításán, megállításán és a hangerő beállításán túl lehetővé tette, hogy egy kattintással ugorhassunk a videó elejére vagy végére, esetleg 5 másodpercet előre vagy hátra. Sőt az állapotjelző sáv sem csak mutatni tudta, hogy hol tart éppen a lejátszás, hanem rákattintva vagy a rajta található kis csúszkát mozgatva alkalmas volt a videó gyorstekerésére is.

Feliratok és magyarázószövegek

De ha már úgyis pontosan követjük a videó lejátszását, akkor akár további lehetőségeken is kezdhetünk gondolkodni. Például nagyon egyszerűen elkészíthetünk egy egyszerű feliratozót. Ehhez szükségünk lesz a megjelenítendő szövegekre, és persze az időpontokra, amikor ezeket meg kell jeleníteni, vagy éppen el kell tüntetni. Sőt, még arra is oda fogunk figyelni, hogy a felirat megfelelő helyen lesz-e a szokásos helyen, a videó alján, vagy át kell-e tenni felülre, mert alul valami zavarná az olvashatóságot. A példaprogram letölthető az oldalunkról.

 

A szövegeket egy JavaScript-tömbben helyezzük el (felirat.js), és az egyszerűbb szerkeszthetőség, javíthatóság miatt a push metódussal adjuk hozzá a tömbhöz az egyes tételeket, hogy egy esetleges későbbi beszúrás vagy törlés miatt ne kelljen az egészet átsorszámoznunk. Minden egyes felirat gyakorlatilag egy újabb tömb, amelynek első eleme a szöveg megjelenítésének időpontja másodpercben, a második azt mondja meg, hogy a szöveget mikor kell levenni a képről, a harmadik érték azt jelzi, hogy a feliratnak a videó tetején (1) vagy az alján (0) van-e a helye, végül a negyedik maga a szöveg – akár HTML-kódokkal formázva –, amit ki kell írnunk.

A feliratot, pontosabban az azt befogadó <div> elemet természetesen a stíluslap segítségével formázzuk meg (video.css: 30–38. sorok), és nemcsak a betűtípust és –méretet állítjuk be, hanem szépen el is helyezzük a videó aljához igazítva, sőt a jobb olvashatóság miatt egy többrétegű árnyékot is adunk hozzá. A szöveg felülre mozgatását egy plusz stílussal oldjuk meg (40-43. sorok), amit majd a programunk fog a későbbiekben hozzáadni a <div>-hez vagy éppen eltávolítani róla.

Elvileg a feliratokat megjelenítő kis szoftverrészletet elhelyezhetnénk egy teljesen önálló funkcióba is, de miután ez a művelet amúgy is igen szorosan összefügg a videó lejátszásának figyelésével, ezért a legegyszerűbb megoldás, ha „hozzácsapjuk” az állapotsáv aktualizálásáért felelő showProgressBarhoz.

 

Miután elég kicsi az esélye annak, hogy „elkapjuk” azokat a pillanatokat, amikor egy-egy szöveget meg kell jelenítenünk vagy éppen el kell tüntetnünk, ezért egyszerűbb és biztonságosabb, ha az elejétől kezdve végignézzük a tömbünket, hogy van-e olyan felirat, amelynek első eleme nagyobb vagy egyenlő, a második eleme pedig kisebb vagy egyenlő, mint ahol éppen a videó tart.

Ha igen, akkor jegyezzük meg a sorszámát, és ki is lépünk a ciklusból, hiszen teljesen felesleges tovább keresgélnünk (video.js: 80-85. sorok). Ezután nézzük meg, hogy változik-e a felirat (87. sor), és ha igen, akkor azt is vizsgáljuk meg, hogy egyáltalán ki kell-e tenni bármilyen szöveget (88. sor), hiszen előfordulhat olyan eset is, amikor éppen semminek nem kell látszania. Ha igen, akkor cseréljük a subtitle <div> tartalmát, és állítsuk be, hogy alul vagy felül kell-e megjelennie (89-90. sorok), ha pedig nem kell semmilyen feliratnak sem látszania, akkor töröljük a <div>-ben lévő szöveget (92. sor).

 

Természetesen amennyiben szükség van rá, nagyon egyszerűen megoldható akár az is, hogy ne csak (formázott) szövegek, hanem például képek is megjelenhessenek „feliratként” vagy a felirat részeként, esetleg egy listából lehessen kiválasztani a felirat nyelvét (például az <option> értéke alapján a subtitle tömb más és más elemét használjuk fel) stb. Sőt még interaktív videókat is készíthetünk – persze megfelelő előkészületeket követően –, amelyek időről időre megállnak (adott ponton egyszerűen kiadjuk a pause() parancsot), majd felteszünk egy kérdést, és a választól (ami lehet gombnyomás, rádiógomb választás stb.) függően más és más helyre tekerjük a videót, és onnan folytatjuk tovább a lejátszást.