A widget (vPlus) lehetővé teszi a szerző számára, hogy HTML diacsomagot hozzon létre, amely szinkronizálva van egy videóval. A vPlus előnyei a hagyományos videókhoz képest:
- a diák használhatja a DevSite szolgáltatásait, például:
- amelyek megkönnyítik a tartalom újrafelhasználását
- feltételesek a különböző közönségekhez szabott tartalmak megjelenítéséhez, ahol ugyanaz a dia a belső technológiára vonatkozna a Google-alkalmazottak számára, és a Google Cloud Platform tartalmai a nagyközönség számára
A szerző szabályozhatja, hogy a videó a dia egyik sarkában jelenjen-e meg, lefedve a teljes diát, vagy leállítva, amíg a felhasználó interakcióba lép a diával.
Demó
Az alábbi példa a vPlus szolgáltatásait mutatja be. Nyomja meg a Play gombot az indításhoz.
- Szép, informatív pont
- Egy másik szép, informatív pont
- Mi mehet a jegyzetbe, szemben a diában.
- Mindegyik tartalmazhat HTML-t vagy markdown-t
- Hasznos lenne-e valamit megjeleníteni a nézőnek, vagy csak a jegyzetekben, amelyeket az előadó előre láthatóan látna és fel is olvashat.
- A felhasználók maguk is megtekinthetik a jegyzeteket, általában offline módban.
- A jegyzetek egy módja lehet a demókhoz való hivatkozásnak .
- A Video Plus videólejátszást és diákat indít
- Csökkenti a videó újrafelvételének szükségességét, ha a diák megváltozik
- Kereshető átiratot biztosít
- Szünetelteti a videót a felhasználói beavatkozásokhoz
- A videó válthat nagy és kicsi között
Séma
A Video Plus widget úgy jön létre, hogy egy elemet a devsite-vplus osztállyal jelöl meg. Ezenkívül ennek az elemnek tartalmaznia kell egy data-video-id attribútumot, amely meghatározza a megjelenítendő YouTube-videó azonosítóját.
Ha a widget elem egy data-captions-url attribútumot is tartalmaz, akkor meg kell adnia a videóhoz tartozó feliratokat tartalmazó json fájlt. Ennek a fájlnak vagy ugyanabban a könyvtárban kell lennie, mint az md vagy html fájlnak, vagy ha „/”-vel kezdődik, akkor a fájl elérési útja a gyökérben kezdődik. A fájl formátumával és generálásával kapcsolatos részletekért lásd a vPlus videolejátszót. A feliratfájlt manuálisan kell kivonni a videóból; lásd //engedu/common/vplus/README.md fájlt a részletekért és a feliratfájl létrehozására szolgáló eszközért.
Ezenkívül a devsite-vplus elemnek tartalmaznia kell egy devsite-vplus-content-container osztályú elemet. Ennek az elemnek viszont tartalmaznia kell egy devsite-vplus-slide-frame osztályú elemet.
A devsite-vplus-slide-frame elemen belüli minden elemet diának kell tekinteni. A diákat időrendi sorrendben kell felsorolni. Minden diaelemnek rendelkeznie kell egy data-start-time attribútummal, amely megadja azt az időt egész másodpercben, amikor a diát meg kell jeleníteni. Ezenkívül minden diák rendelkezhet egy data-video-mode attribútummal. Ennek az attribútumnak két érvényes értéke van:
- "nagy": a videó a diaterület nagy részét elfoglalja, és lefedi a diát.
- "stopped": a videó szüneteltetését eredményezi, amikor elérte a diát.
Ha a data-video-mode nincs megadva, a videó alapértelmezés szerint a kis méretre áll be.
A diaszerzők valószínűleg további CSS-t akarnak megadni diákjaikhoz. Mivel a diák devsite-vplus-slide-frame osztályú div ben található, a diaspecifikus CSS-stílusok névterekkel rendelhetők az osztály gyermekelemeihez.
Például:
<style>
.devsite-vplus-slide-frame h1 {
background-color: #4285F4;
border-bottom: 1px solid #7BAAF7;
color: #fff;
margin: 0;
padding: 10px;
top: 0 !important;
}
/* More styles... */
</style>
<div class="devsite-vplus" data-video-id="PXVnv_Paexc" data-captions-url="video-plus-captions.json">
<div class="devsite-vplus-content-container">
<div class="devsite-vplus-slide-frame">
<div data-start-time=0 class="title-background">
<div class="header1 title">vPlus Demo</div>
</div>
<div data-slide-note=true>
Note for the 'title' slide.
</div>
<div data-start-time=2 data-video-mode="large">
<!-- Intentionally left blank -->
</div>
<div data-slide-note=true>
This slide was intentionally left blank.
</div>
<div data-start-time=13>
<div class="header2">Nice Informative Slide</div>
<ul>
<li>Nice, informative bullet point</li>
<li>Another nice, informative bullet point</li>
</ul>
</div>
<div data-slide-note=true>
Very meta. In this note, we could talk about several things:
<ul>
<li>What could go in the note versus in the slide itself.
<ul>
<li>Either can contain HTML or markdown</li>
<li>Whether it would be useful to display something to the viewer
or only in the notes that the presenter would presummably
see and may read out loud.</li>
</ul>
</li>
<li>Users may view notes themselves, usually offline.</li>
<li>Notes could be a way of
<a href="#demo">linking to demos</a>.
</li>
</ul>
</div>
<div data-start-time=21>
<div class="header2">Nice, informative cat picture</div>
<div>
<!-- Image CCO Public Domain at https://pixabay.com/en/kitten-cute-feline-kitty-domestic-1246693/ -->
<img class="cat-pic" src="https://cdn.pixabay.com/photo/2016/03/09/15/31/kitten-1246693_1280.jpg">
</div>
</div>
<div data-start-time=32 data-video-mode="stopped">
<div class="header2">Here's some interactive content</div>
<div>
<devsite-multiple-choice>
<div>What color is the sky?</div>
<div correct>
<div>Blue</div>
<div>But do you know <b>why</b>?</div>
</div>
<div>
<div>Purple</div>
<div>Not really</div>
</div>
<div>
<div>Indigo</div>
<div>Close but not quite</div>
</div>
<div>
<div>Green</div>
<div>What planet are you from?</div>
</div>
</devsite-multiple-choice>
</div>
</div>
<div data-slide-note="true">
Note, when an interactive slide is reached,
you have to click the 'Play' button,
or the 'Next Slide' button in order to continue.
</div>
<div data-start-time=33 data-video-mode="stopped">
<div class="header2">Here's some more interactive content - <a href="/blockly/">Blockly</a></div>
<iframe style="height: 75%; width: 90%; margin: 0 5%;" src="/blockly/blockly-demo/blockly-demo"></iframe>
</div>
<div data-start-time=34 data-video-mode="large">
<!-- Intentionally left blank -->
</div>
<div data-start-time=78>
<div>
<div class="header2">Thanks for watching!</div>
<ul>
<li>Video Plus drives video play and slides</li>
<li>Reduces need to reshoot video if slides change</li>
<li>Provides searchable transcript</li>
<li>Pauses video for user interactions</li>
<li>Video can switch between large and small</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Amikor a vPlus widget megjelenik egy oldalon, a videolejátszó nem indul el automatikusan, de miután a felhasználó megnyomja a lejátszás gombot, a diák és a feliratok, ha megjelennek, automatikusan továbblépnek. A felhasználók a következő egér- és billentyűzetműveleteket is használhatják a widget használatához.