Widgeten (vPlus) lar forfatteren lage en HTML-lysbildeserie som er synkronisert med en video. Fordelene med vPlus fremfor en tradisjonell video er:
- lysbilder kan bruke DevSite-funksjoner som:
- inkluderer som gjør det enkelt å gjenbruke innhold
- betingelser for å vise innhold skreddersydd for ulike målgrupper der samme lysbilde vil referere til intern teknologi for Googlere, og Google Cloud Platform-innhold for allmennheten
Forfatteren kan kontrollere om videoen skal vises i et hjørne av lysbildet, som dekker hele lysbildet, eller stoppes mens brukeren samhandler med et lysbilde.
Demo
Følgende er et eksempel på vPlus som demonstrerer funksjonene. Trykk på Play- knappen for å starte.
- Fint, informativt punkt
- Nok et fint, informativt punkt
- Hva kan gå i lappen kontra i selve lysbildet.
- Enten kan inneholde HTML eller markdown
- Om det vil være nyttig å vise noe til seeren eller bare i notatene som programlederen antagelig vil se og kan lese høyt.
- Brukere kan se notater selv, vanligvis offline.
- Notater kan være en måte å koble til demoer på .
- Video Plus driver videoavspilling og lysbilder
- Reduserer behovet for å ta opp video på nytt hvis lysbildene endres
- Gir søkbar transkripsjon
- Setter videoen på pause for brukerinteraksjoner
- Video kan veksle mellom stort og lite
Skjema
En Video Plus-widget lages ved å merke et element med klassen devsite-vplus . I tillegg må dette elementet inneholde et data-video-id attributt som spesifiserer ID-en til YouTube-videoen som skal vises.
Hvis widgetelementet også inneholder et data-captions-url attributt, bør det spesifisere en json-fil som inneholder bildetekstene som tilsvarer videoen. Denne filen bør enten være i samme katalog som md eller html filen, eller hvis den starter med '/', starter banen til filen ved roten. Se vPlus videospiller for detaljer om formatet og genereringen av denne filen. Bildetekstfilen må trekkes ut manuelt fra videoen; se //engedu/common/vplus/README.md for detaljer og et verktøy for å generere bildetekstfilen.
Videre bør devsite-vplus elementet inneholde et element med klassen devsite-vplus-content-container . I sin tur skal det elementet inneholde et element med klassen devsite-vplus-slide-frame .
Hvert element inne i devsite-vplus-slide-frame elementet antas å være et lysbilde. Lysbildene skal være oppført i kronologisk rekkefølge. Hvert lysbildeelement må ha en data-start-time attributt som spesifiserer tiden i hele sekunder når dette lysbildet skal vises. I tillegg kan hvert lysbilde ha et data-video-mode attributt. Attributtet har to gyldige verdier:
- "stor": får videoen til å oppta mesteparten av lysbildeplassen, og dekker lysbildet.
- "stoppet": fører til at videoen settes på pause når det lysbildet nås.
Hvis data-video-modus ikke er spesifisert, har videoen som standard den lille størrelsen.
Lysbildeforfattere vil sannsynligvis spesifisere ekstra CSS for lysbildene sine. Siden lysbildene er inneholdt i en div med klassen devsite-vplus-slide-frame , kan lysbildespesifikke CSS-stiler gis navneavstand til underordnede elementer i denne klassen.
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-widgeten vises på en side, startes ikke videospilleren automatisk, men etter at brukeren trykker på avspillingsknappen, blir lysbildene og bildetekstene, hvis de vises, automatisk avansert. Brukere kan også bruke følgende mus- og tastaturhandlinger for å samhandle med widgeten.