Widgetul (vPlus) permite autorului să creeze un pachet de diapozitive HTML care este sincronizat cu un videoclip. Beneficiile vPlus față de un videoclip tradițional sunt:
- Slide-urile pot folosi funcții DevSite, cum ar fi:
- include care facilitează reutilizarea conținutului
- condiționale pentru a afișa conținut adaptat diferitelor categorii de public, în care același slide s-ar referi la tehnologia internă pentru Google și conținutul Google Cloud Platform pentru publicul larg
Autorul poate controla dacă videoclipul este afișat într-un colț al diapozitivului, acoperind întregul diapozitiv sau oprit în timp ce utilizatorul interacționează cu un diapozitiv.
Demo
Următorul este un exemplu de vPlus care își demonstrează caracteristicile. Apăsați butonul Redare pentru a începe.
- Un punct frumos, informativ
- Un alt punct frumos, informativ
- Ce ar putea intra în notă versus în slide-ul în sine.
- Oricare poate conține HTML sau markdown
- Dacă ar fi util să afișați ceva privitorului sau numai în notele pe care prezentatorul le-ar vedea și le-ar putea citi cu voce tare.
- Utilizatorii pot vedea ei înșiși notele, de obicei offline.
- Notele ar putea fi o modalitate de conectare la demonstrații .
- Video Plus conduce redarea video și diapozitive
- Reduce necesitatea de a reînregistra videoclipul dacă diapozitivele se modifică
- Oferă o transcriere care poate fi căutată
- Întrerupe videoclipul pentru interacțiunile utilizatorului
- Videoclipul poate comuta între mare și mic
Schemă
Un widget Video Plus este creat prin marcarea unui element cu clasa devsite-vplus . În plus, acel element trebuie să conțină un atribut data-video-id care specifică id-ul videoclipului YouTube care urmează să fie afișat.
Dacă elementul widget conține și un atribut data-captions-url , ar trebui să specifice un fișier json care să conțină subtitrările corespunzătoare videoclipului. Acest fișier ar trebui să fie fie în același director cu fișierul md sau html , fie dacă începe cu un „/”, calea către fișier începe de la rădăcină. Consultați playerul video vPlus pentru detalii despre formatul și generarea acestui fișier. Fișierul subtitrărilor trebuie extras manual din videoclip; consultați //engedu/common/vplus/README.md pentru detalii și un instrument pentru a genera fișierul de legendă.
În plus, elementul devsite-vplus ar trebui să conțină un element cu clasa devsite-vplus-content-container . La rândul său, acel element ar trebui să conțină un element cu clasa devsite-vplus-slide-frame .
Se presupune că fiecare element din interiorul elementului devsite-vplus-slide-frame este un slide. Diapozitivele trebuie listate în ordine cronologică. Fiecare element de diapozitiv trebuie să aibă un atribut data-start-time care specifică timpul în secunde întregi când ar trebui să fie afișat acest diapozitiv. În plus, fiecare diapozitiv poate avea un atribut data-video-mode . Acest atribut are două valori valide:
- „mare”: face ca videoclipul să ocupe cea mai mare parte a spațiului de diapozitiv, acoperind diapozitivul.
- „oprit”: face ca videoclipul să fie întrerupt când se ajunge la acel slide.
Dacă nu este specificat data-video-mode, videoclipul este implicit la dimensiunea sa mică.
Autorii diapozitivelor vor dori probabil să specifice CSS suplimentar pentru diapozitivele lor. Deoarece diapozitivele sunt conținute într-un div cu clasa devsite-vplus-slide-frame , stilurile CSS specifice diapozitivelor pot fi spațiate de nume la elementele copil ale acestei clase.
De exemplu:
<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>
Când widget-ul vPlus este afișat pe o pagină, playerul video nu este pornit automat, dar după ce utilizatorul apasă butonul de redare, diapozitivele și legendele, dacă sunt afișate, sunt avansate automat. Utilizatorii pot folosi, de asemenea, următoarele acțiuni de mouse și tastatură pentru a interacționa cu widget-ul.