Widget'en (vPlus) giver forfatteren mulighed for at oprette et HTML-diasdæk, der er synkroniseret med en video. Fordelene ved vPlus i forhold til en traditionel video er:
- slides kan bruge DevSite-funktioner såsom:
- omfatter , som gør det nemt at genbruge indhold
- betingelser for at vise indhold, der er skræddersyet til forskellige målgrupper, hvor det samme dias refererer til intern teknologi for Googlere, og Google Cloud Platform-indhold til den brede offentlighed
Forfatteren kan kontrollere, om videoen skal vises i et hjørne af diaset, der dækker hele diaset, eller stoppes, mens brugeren interagerer med et dias.
Demo
Det følgende er et eksempel på vPlus, der demonstrerer dets funktioner. Tryk på knappen Afspil for at starte.
- Fint, informativt punktum
- Endnu et godt, informativt punkt
- Hvad kunne der gå i noten versus i selve sliden.
- Enten kan indeholde HTML eller markdown
- Om det ville være nyttigt at vise noget til seeren eller kun i de noter, som oplægsholderen formentlig vil se og kan læse højt.
- Brugere kan selv se noter, normalt offline.
- Noter kunne være en måde at linke til demoer på .
- Video Plus driver videoafspilning og dias
- Reducerer behovet for at genoptage video, hvis dias ændres
- Giver søgbar udskrift
- Sætter video på pause for brugerinteraktioner
- Video kan skifte mellem stort og småt
Skema
En Video Plus-widget oprettes ved at markere et element med klassen devsite-vplus . Derudover skal dette element indeholde en data-video-id attribut, der angiver id'et for den YouTube-video, der skal vises.
Hvis widgetelementet også indeholder en data-captions-url attribut, skal det angive en json-fil, der indeholder billedteksterne, der svarer til videoen. Denne fil skal enten være i samme mappe som md eller html filen, eller hvis den starter med et '/', starter stien til filen ved roden. Se vPlus videoafspiller for detaljer om formatet og genereringen af denne fil. Billedtekstfilen skal udpakkes manuelt fra videoen; se //engedu/common/vplus/README.md for detaljer og et værktøj til at generere billedtekstfilen.
Desuden skal devsite-vplus elementet indeholde et element med klassen devsite-vplus-content-container . Til gengæld skal dette element indeholde et element med klassen devsite-vplus-slide-frame .
Hvert element inde i devsite-vplus-slide-frame elementet antages at være et slide. Sliderne skal være opført i kronologisk rækkefølge. Hvert diaselement skal have en data-start-time attribut, der angiver tidspunktet i hele sekunder, hvor dette dias skal vises. Derudover kan hvert dias have en data-video-mode attribut. Denne attribut har to gyldige værdier:
- "stor": får videoen til at optage det meste af diaspladsen og dækker diaset.
- "stoppet": får videoen til at blive sat på pause, når det pågældende dias nås.
Hvis data-video-tilstand ikke er angivet, vil videoen som standard have en lille størrelse.
Slideforfattere vil sandsynligvis gerne angive ekstra CSS til deres slides. Da slides er indeholdt i en div med klassen devsite-vplus-slide-frame , kan slide-specifikke CSS-stilarter navngives til underordnede elementer i denne klasse.
For eksempel:
<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>
Når vPlus-widgetten vises på en side, startes videoafspilleren ikke automatisk, men efter at brugeren trykker på afspilningsknappen, fremføres diasene og billedteksterne, hvis de vises, automatisk. Brugere kan også bruge følgende mus- og tastaturhandlinger til at interagere med widgetten.