Widgeten (vPlus) låter författaren skapa ett HTML-bildspel som är synkroniserat med en video. Fördelarna med vPlus jämfört med en traditionell video är:
- bilder kan använda DevSite-funktioner som:
- innehåller som gör det enkelt att återanvända innehåll
- villkor för att visa innehåll skräddarsytt för olika målgrupper där samma bild hänvisar till intern teknik för Googlers och Google Cloud Platform-innehåll för allmänheten
Författaren kan kontrollera om videon ska visas i ett hörn av bilden, täcka hela bilden eller stoppas medan användaren interagerar med en bild.
Demo
Följande är ett exempel på vPlus som visar dess funktioner. Tryck på Play- knappen för att starta.
- Trevlig, informativ punktpunkt
- Ännu en trevlig, informativ punktpunkt
- Vad skulle kunna stå i lappen kontra i själva bilden.
- Antingen kan innehålla HTML eller markdown
- Om det skulle vara användbart att visa något för tittaren eller bara i anteckningarna som presentatören förmodligen skulle se och kan läsa högt.
- Användare kan se anteckningar själva, vanligtvis offline.
- Anteckningar kan vara ett sätt att länka till demos .
- Video Plus driver videouppspelning och bilder
- Minskar behovet av att spela in video om bilderna ändras
- Ger sökbar utskrift
- Pausar video för användarinteraktioner
- Video kan växla mellan stor och liten
Schema
En Video Plus-widget skapas genom att markera ett element med klassen devsite-vplus . Dessutom måste elementet innehålla ett data-video-id attribut som anger ID:t för YouTube-videon som ska visas.
Om widgetelementet också innehåller ett data-captions-url attribut, bör det ange en json-fil som innehåller bildtexterna som motsvarar videon. Den här filen bör antingen finnas i samma katalog som md eller html filen, eller om den börjar med ett '/' börjar sökvägen till filen vid roten. Se vPlus videospelare för detaljer om formatet och genereringen av denna fil. Textningsfilen måste extraheras manuellt från videon; se //engedu/common/vplus/README.md för detaljer och ett verktyg för att generera bildtextfilen.
Dessutom bör elementet devsite-vplus innehålla ett element med klassen devsite-vplus-content-container . I sin tur bör det elementet innehålla ett element med klassen devsite-vplus-slide-frame .
Varje element inuti devsite-vplus-slide-frame elementet antas vara en bild. Bilderna måste listas i kronologisk ordning. Varje bildelement måste ha ett data-start-time attribut som anger tiden i hela sekunder när denna bild ska visas. Dessutom kan varje bild ha ett data-video-mode attribut. Det attributet har två giltiga värden:
- "stor": gör att videon tar upp det mesta av bildytan och täcker bilden.
- "stoppad": gör att videon pausas när den bilden nås.
Om data-video-läge inte är specificerat, har videon som standard sin lilla storlek.
Bildförfattare kommer förmodligen att vilja ange extra CSS för sina bilder. Eftersom bilderna finns i en div med klassen devsite-vplus-slide-frame , kan bildspecifika CSS-stilar namnavgränsas till underordnade element i den här klassen.
Till exempel:
<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 visas på en sida startas inte videospelaren automatiskt, men efter att användaren tryckt på uppspelningsknappen flyttas bilderna och bildtexterna, om de visas, automatiskt fram. Användare kan också använda följande mus- och tangentbordsåtgärder för att interagera med widgeten.