El giny (vPlus) permet a l'autor crear un conjunt de diapositives HTML que es sincronitzi amb un vídeo. Els avantatges de vPlus respecte a un vídeo tradicional són:
- les diapositives poden utilitzar funcions de DevSite com ara:
- inclou que faciliten la reutilització del contingut
- condicionals per mostrar contingut adaptat a diferents públics on la mateixa diapositiva faria referència a tecnologia interna per als Googlers i contingut de Google Cloud Platform per al públic en general
L'autor pot controlar si el vídeo es mostra en una cantonada de la diapositiva, que cobreix tota la diapositiva, o si s'atura mentre l'usuari interactua amb una diapositiva.
Demostració
El següent és un exemple de vPlus que demostra les seves característiques. Premeu el botó Reproduir per començar.
- Un punt agradable i informatiu
- Un altre punt agradable i informatiu
- Què podria anar a la nota versus a la pròpia diapositiva.
- Tots dos poden contenir HTML o rebaixes
- Si seria útil mostrar alguna cosa a l'espectador o només a les notes que el presentador presumiblement veuria i podria llegir en veu alta.
- Els usuaris poden veure les notes ells mateixos, normalment fora de línia.
- Les notes podrien ser una manera d' enllaçar amb demostracions .
- Video Plus impulsa la reproducció de vídeo i les diapositives
- Redueix la necessitat de tornar a gravar el vídeo si canvien les diapositives
- Proporciona una transcripció cercable
- Posa en pausa el vídeo per a les interaccions dels usuaris
- El vídeo pot canviar entre gran i petit
Esquema
Es crea un widget Video Plus marcant un element amb la classe devsite-vplus . A més, aquest element ha de contenir un atribut data-video-id que especifiqui l'identificador del vídeo de YouTube que s'ha de mostrar.
Si l'element del widget també conté un atribut data-captions-url , hauria d'especificar un fitxer json que contingui els subtítols corresponents al vídeo. Aquest fitxer hauria d'estar al mateix directori que el fitxer md o html , o si comença amb un '/', el camí del fitxer comença a l'arrel. Consulteu el reproductor de vídeo vPlus per obtenir més informació sobre el format i la generació d'aquest fitxer. El fitxer de subtítols s'ha d'extreure manualment del vídeo; vegeu //engedu/common/vplus/README.md per obtenir més informació i una eina per generar el fitxer de subtítols.
A més, l'element devsite-vplus hauria de contenir un element amb la classe devsite-vplus-content-container . Al seu torn, aquest element hauria de contenir un element amb la classe devsite-vplus-slide-frame .
Se suposa que cada element dins de l'element devsite-vplus-slide-frame és una diapositiva. Les diapositives s'han d'enumerar per ordre cronològic. Cada element de la diapositiva ha de tenir un atribut data-start-time que especifiqui el temps en segons sencers quan s'ha de mostrar aquesta diapositiva. A més, cada diapositiva pot tenir un atribut data-video-mode . Aquest atribut té dos valors vàlids:
- "gran": fa que el vídeo ocupi la major part de l'espai de la diapositiva i cobreix la diapositiva.
- "aturat": fa que el vídeo s'atura quan s'arriba a aquesta diapositiva.
Si no s'especifica el mode de vídeo de dades, el vídeo adoptarà la seva mida petita per defecte.
Els autors de diapositives probablement voldran especificar un CSS addicional per a les seves diapositives. Com que les diapositives estan contingudes en un div amb la classe devsite-vplus-slide-frame , els estils CSS específics de la diapositiva es poden associar a elements secundaris d'aquesta classe.
Per exemple:
<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>
Quan el giny de vPlus es mostra a una pàgina, el reproductor de vídeo no s'inicia automàticament, però després que l'usuari prem el botó de reproducció, les diapositives i els subtítols, si es mostren, s'avança automàticament. Els usuaris també poden utilitzar les següents accions del ratolí i del teclat per interactuar amb el giny.