Valdiklis (vPlus) leidžia autoriui sukurti HTML skaidrių rinkinį, kuris sinchronizuojamas su vaizdo įrašu. „vPlus“ pranašumai, palyginti su tradiciniu vaizdo įrašu, yra šie:
- skaidrės gali naudoti DevSite funkcijas, tokias kaip:
Autorius gali valdyti, ar vaizdo įrašas rodomas skaidrės kampe, apimantis visą skaidrę, ar sustabdomas, kol vartotojas sąveikauja su skaidre.
Demo
Toliau pateikiamas vPlus pavyzdys, demonstruojantis jo funkcijas. Norėdami pradėti, paspauskite paleidimo mygtuką.
- Puikus, informatyvus taškas
- Dar vienas gražus, informatyvus taškas
- Kas gali būti užraše, palyginti su pačioje skaidrėje.
- Gali būti HTML arba žymėjimo
- Nesvarbu, ar būtų naudinga ką nors parodyti žiūrovui, ar tik užrašuose, kuriuos vedėjas iš anksto matytų ir gali perskaityti garsiai.
- Vartotojai gali patys peržiūrėti pastabas, dažniausiai neprisijungę.
- Pastabos gali būti būdas susieti su demonstracine versija .
- „Video Plus“ skatina vaizdo įrašų atkūrimą ir skaidres
- Sumažėja poreikis iš naujo filmuoti vaizdo įrašą, jei keičiasi skaidrės
- Pateikiamas paieškos nuorašas
- Pristabdo vaizdo įrašą naudotojo sąveikai
- Vaizdo įrašas gali persijungti iš didelio ir mažo
Schema
„Video Plus“ valdiklis sukuriamas elementą pažymėjus klase devsite-vplus . Be to, šiame elemente turi būti atributas data-video-id , nurodantis rodomo „YouTube“ vaizdo įrašo ID.
Jei valdiklio elemente taip pat yra atributas data-captions-url , jis turėtų nurodyti json failą, kuriame yra vaizdo įrašą atitinkančios antraštės. Šis failas turi būti tame pačiame kataloge kaip ir md arba html failas, arba jei jis prasideda raide „/“, kelias į failą prasideda šaknyje. Norėdami gauti daugiau informacijos apie šio failo formatą ir generavimą, žr. „vPlus“ vaizdo grotuvą. Subtitrų failas turi būti rankiniu būdu ištrauktas iš vaizdo įrašo; žr. //engedu/common/vplus/README.md kad gautumėte daugiau informacijos ir įrankį subtitrų failui generuoti.
Be to, elemente devsite-vplus turėtų būti elementas su klase devsite-vplus-content-container . Savo ruožtu tame elemente turėtų būti elementas su klase devsite-vplus-slide-frame .
Laikoma, kad kiekvienas elementas devsite-vplus-slide-frame elemente yra skaidrė. Skaidrės turi būti išvardytos chronologine tvarka. Kiekvienas skaidrės elementas turi turėti atributą data-start-time , nurodantį laiką ištisomis sekundėmis, kada ši skaidrė turi būti rodoma. Be to, kiekviena skaidrė gali turėti data-video-mode atributą. Šis atributas turi dvi galiojančias reikšmes:
- „didelis“: vaizdo įrašas užima didžiąją dalį skaidrės vietos ir uždengia skaidrę.
- „sustabdytas“: vaizdo įrašas pristabdomas, kai pasiekiama ši skaidrė.
Jei duomenų vaizdo įrašo režimas nenurodytas, vaizdo įrašo dydis yra mažas.
Skaidrių autoriai tikriausiai norės savo skaidrėms nurodyti papildomą CSS. Kadangi skaidrės yra div su klase devsite-vplus-slide-frame , skaidrėms būdingi CSS stiliai gali būti suskirstyti į antrinius šios klasės elementus.
Pavyzdžiui:
<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>
Kai puslapyje rodomas „vPlus“ valdiklis, vaizdo įrašų grotuvas automatiškai nepaleidžiamas, tačiau vartotojui paspaudus paleidimo mygtuką, skaidrės ir antraštės, jei rodomos, yra automatiškai perkeliamos į priekį. Naudotojai taip pat gali naudoti šiuos pelės ir klaviatūros veiksmus, kad galėtų sąveikauti su valdikliu.