Videók beágyazása Canvas-oldalba

Tóth-Mózer Szilvia | 2017.08.16.
Videók beágyazása Canvas-oldalba
A beágyazott tartalmak hozzásegítenek ahhoz, hogy külső hivatkozások (linkek és ugrópontok) hozzáadása helyett egy keretben lehessen látni a videókat, hangfájlokat, prezentációkat stb., így a hallgatóknak tanulás közben nem kell elhagyniuk az oldalt, így jobban tudnak összpontosítani, kevésbé vesznek el a sok egyszerre megnyitott lap között a böngészőben. A tartalom beágyazásának további előnye, hogy dinamikusan változó tartalmak megjelenítésére is alkalmas. Az alábbiakban ismertetjük, hogy különböző forrásokból hogyan lehet videókat az oldalaink részeivé tenni.

A Canvas-oldal szerkesztése a Vizuális szövegszerkesztő vagy a HTML szövegszerkesztő nézet segítségével történhet, amelyek között könnyedén válthatunk. Tartalom beágyazásához a Vizuális szövegszerkesztőt a HTML szerkesztő módba állítjuk, és a kódba illesztjük be a tartalom beágyazókódját. A különböző tartalmak beágyazásával nem sértjük meg a szerzői jogot, hiszen csak hivatkozunk, ugyanakkor számolnunk kell azzal is, ha az adott tartalmat nem mi hoztuk létre, akkor az eredeti szerző bármikor eltávolíthatja azt, és akkor a beágyazott tartalmunk sem lesz elérhető többé. Az alábbiakban ismertetjük, hogy különböző forrásokból hogyan lehet videókat az oldalaink részeivé tenni.

Videók

Ügyeljünk arra, hogy az oldalakon elhelyezett videók se úgy “lógjanak a levegőben”, kapcsolódjanak a tananyaghoz, írjuk le a videó megtekintéséhez szükséges előzetest, ha kell, helyezzünk el ebben a szövegben a hiányos előzetes tudás befoltozására alkalmas tananyagra mutató linkeket, legyen szó saját fejlesztésű oldalról vagy bármilyen egyéb külső hivatkozásról. Ismertessük a tanulási célokat, amelyek a videóhoz kapcsolódnak, legyen világos, hogy a videó megtekintése a törzsanyaghoz tartozik-e még vagy gazdagító tartalom, esetleg érdekesség. A videó szövege jó esetben elérhető feliratként vagy átiratként (transcript) vagy magához a videófájlhoz kapcsolódóan vagy külön fájlként/hivatkozásként a tananyagban/az oldalon. Az akadálymentesítés e formája nem csak a hallássérült vagy a hiányos nyelvtudással rendelkező hallgatókat segíti, de a vizuális típusú tanulóknak is kedvező. Sokan tanulnak úgy, hogy az elérhető tananyagokat kinyomtatják vagy e-könyv olvasóra töltik, és ilyen módon emelik ki belőlük a lényeget, készítenek saját jegyzeteket, vázlatokat hozzájuk. A beágyazott tartalomhoz kapcsolódó fogalmak listáját is megjeleníthetjük, akár címkeszerűen, más oldalra mutató linkekkel ellátva. Például a videó szólhat a szénhidrátok izomműködésben betöltött szerepéről, és címkéjeként, kapcsolódó fogalomként beírhatjuk, hogy “glikolízis” vagy hogy “poliszacharidok”. A fogalmakhoz kapcsolhatunk egy oldalt, amit akár a hallgatók is szerkeszthetnek, kidolgozva azt a számonkérésre.

TED

A TED (Technology, Entertainment, Design, azaz technológia, szórakoztatás, dizájn) mottója: „ideas worth spreading”, azaz olyan gondolatok, amelyeket érdemes terjeszteni. Kategóriákba sorolt előadások tekinthetőek meg ingyenesen neves előadóktól, szakértőktől, kutatóktól, akik egy rövid bemutató erejéig szakterületük egy lényeges kérdéséről vagy új kutatási eredményéről beszélnek közérthető módon, ami gyakran kivételes retorikai stílussal is párosul. A videók közül sokhoz érhető el magyar nyelvű felirat, illetve valós időben követhető angol (illetve amilyen nyelvekre lefordították a felhasználók) nyelvű átirat (transcript), így nyelvtanuláshoz is kiváló eszköz.

A videók a Share (megosztás) lehetőségre kattintva

  • megoszthatóak a közösségi médiában (Facebook, LinkedIn, Twitter) vagy e-mailben, de ki is nyerhető egy link, ami más módon is elküldhető, elmenthető (például közösségi könyvjelzőként a https://del.icio.us/ oldalán, ez a Direct link lehetőség,
  • letölthetőek (Download video), legördülülő menüből választható felirattal (Subtitles) MP4 formátumban. MP3 formátumban hangfájlként (Download audio), a Download alatt,
  • beágyazhatóak felirattal vagy anélkül (Subtitles: Off), ezek az Embed felirat alatti lehetőségek. A kódot ki kell másolnunk és beillesztenünk a HTML szerkesztőben a megfelelő helyre. A Vizuális szövegszerkesztőre kattintva előnézetben csak egy szürke dobozt látunk, de mentés után az oldalon is megjelenik a videó. A kódba általában nem kell belenyúlni, de a kód segítségével méretezhető a videó, a width a szélességet, a height a magasságot jeleni, ahol a számokat tetszőlegesen kicserélhetjük, csak ügyeljünk az oldalarányokra. Így például ha felére csökkentjük az egyik számot, a másikkal is tegyünk így.

YouTube

A videómegosztókon (mint amilyen a YouTube) elérhető videók általában rendelkeznek beágyazókóddal (embed code) is. A YouTube-on ennek a kódnak az előhívását minden videónál a Megosztás gombra kattintva kezdhetjük el. Ezután a megjelenő lehetőségek közül a Beágyazás fülön kell keresgélnünk. Megjelenik az iframe kód, azaz a beágyazókód, amit majd az oldalunk HTML kódjába kell másolnunk. Még mielőtt ezt tennénk, a Több gombra kattintva láthatunk egy-két további beállítási lehetőséget. A TED-videókkal ellentétben a méretezést még a kód generálása előtt megoldhatjuk, azaz nem kell belenyúlnunk majd a kódba, vagyis a méret beállításával frissül a fenti másolandó beágyazókód. Egyedi méret is megadható. Jelölőnégyzetekkel szabályozható továbbá, hogy a videó befejezését követően jelenjenek-e meg ajánlott videók. Ez nem szükséges, hiszen összezavarhatja a tanulót, hogy ezt is az oktatója javasolja vagy a YouTube, ráadásul nem mindig találja el a videószolgáltató, hogy az ajánlott videó tényleg hasonló műfajú, témájú, mint az előző, ami nevetséges ajánlást is eredményezhet. Bekattintható a lejátszásvezérlők mutatása, valamint a videó címének és a lejátszó műveleteinek mutatása.

Ha egyszerre több videót is szeretnénk beágyazni, kézenfekvő megoldás a YouTube-on a lejátszási lista beágyazása. Ehhez némi előkészület szükséges, hiszen saját YouTube-fiók kell hozzá, ami lényegében a Gmail-lel történő összekapcsoltság révén meg is van oldva. Az előzetesen létrehozott lejátszási listát úgy ágyazhatjuk be az oldalunkra, ha bejelentkezünk a YouTube-fiókunkba a számítógépen, az oldal bal oldalán a Lejátszási listák lehetőségre kattintunk, majd pedig a beágyazni kívánt lejátszási listára. Itt is a Megosztás, majd a Beágyazás lehetőséget keressük. A megjelenő mezőből ezután már csak ki kell másolni a HTML-kódot és beilleszteni az oldal szövegszerkesztő mezejébe HTML módban. Minden, HTML szövegszerkesztővel ellátott szövegdobozban, így még az események leírásában is helyezhetünk el beágyazott tartalmat.

Számolnunk kell azzal, hogy a beágyazott tartalom, legyen szó videóról vagy bármi másról, nem fog mindenféle funkciógombot megjeleníteni, amit a beágyazott tartalom eredeti környezetében megtalálunk. Például a YouTube-ról beágyazott videónál a további funkciók eléréséhez a YouTube feliratra kell kattintanunk. Így tudjuk például aktiválni a gyorsabb vagy lassabb lejátszási sebességet, ami a tanulók körében egy népszerű lehetőség, ha a videóban az előadó beszédtempója túl lassú (gyakran így ítélik meg a türelmetlenebb hallgatók), ugyanakkor idegen nyelvű vagy információkban dúsabb, hadaró előadós, nehezebben követhető anyagokhoz szívesen veszi a hallgatóság, ha bekapcsolhatja a lassítást. Akár negyedére is lassíthatjuk a videót vagy kétszeresére növelhetjük a sebességet.

Google Drive

A Google Drive-ban tárolt videóink esetében a fájlra kattintva megjelenik a lejátszó. A beágyazókód kinyerése előtt még a további lehetőségeket jelző három pontra kell kattintanunk, ott a Megnyitás új ablakban feliratra. Ezután ismét a további lehetőségeket jelző három pontot kell keresnünk, és itt már szerepelni fog az Elem beágyazása menüpont. Felugrik egy munkaablak, ahonnan kimásolható a Canvas-oldalunkba HTML szerkesztő üzemmódban beillesztendő kód. Azt szem előtt kell tartani, hogy a megosztási beállításokban a láthatósági szintet minimum a link birtokában bárki számára megtekinthető szintre kell állítani, ellenkező esetben a kód mit sem ér, hiszen csak a fájl tulajdonosa és azok az együttműködők férnek hozzá, akikkel megosztották.

Összefoglalva: a videók beágyazásánál a Vizuális szövegszerkesztőt HTML szerkesztő üzemmódba kapcsoljuk a Canvasban, és így illesztjük be a videó beágyazókódját, majd ellenőrizzük az eredményt. A beágyazókód megtalálásához a különböző videómegosztó oldalakon a megosztás (share) és a beágyazókód (embed code) lesznek a kulcsszavak, amelyeket keresnünk kell.