Logrīks (vPlus) ļauj autoram izveidot HTML slaidu komplektu, kas ir sinhronizēts ar videoklipu. vPlus priekšrocības salīdzinājumā ar tradicionālo video ir šādas:
- slaidi var izmantot DevSite funkcijas, piemēram:
- ietver , kas atvieglo satura atkārtotu izmantošanu
- nosacījumi , lai rādītu dažādām mērķauditorijām pielāgotu saturu, kur viens un tas pats slaids attiektos uz iekšējām tehnoloģijām Google darbiniekiem un Google Cloud Platform saturu plašai sabiedrībai
Autors var kontrolēt, vai videoklips tiek rādīts slaida stūrī, aptverot visu slaidu, vai apturēts, kamēr lietotājs mijiedarbojas ar slaidu.
Demonstrācija
Tālāk ir sniegts vPlus piemērs, kas demonstrē tā funkcijas. Lai sāktu, nospiediet atskaņošanas pogu.
- Jauka, informatīva aizzīme
- Vēl viens jauks, informatīvs punkts
- Kas varētu iet piezīmē, salīdzinot ar pašu slaidu.
- Var ietvert HTML vai atzīmes
- Neatkarīgi no tā, vai būtu lietderīgi kaut ko parādīt skatītājam vai tikai piezīmēs, kuras prezentētājs redzētu un varētu lasīt skaļi.
- Lietotāji paši var skatīt piezīmes, parasti bezsaistē.
- Piezīmes varētu būt veids, kā izveidot saiti ar demonstrācijām .
- Video Plus nodrošina video atskaņošanu un slaidus
- Samazina nepieciešamību atkārtoti uzņemt video, ja mainās slaidi
- Nodrošina meklējamu atšifrējumu
- Aptur video, lai veiktu lietotāja mijiedarbību
- Video var pārslēgties starp lielu un mazu
Shēma
Video Plus logrīks tiek izveidots, atzīmējot elementu ar klasi devsite-vplus . Turklāt šajā elementā ir jāietver atribūts data-video-id kas norāda rādāmā YouTube videoklipa ID.
Ja logrīka elementā ir arī atribūts data-captions-url , tam jānorāda json fails, kurā ir videoklipam atbilstošie paraksti. Šim failam ir jāatrodas tajā pašā direktorijā, kur md vai html fails, vai arī, ja tas sākas ar “/”, ceļš uz failu sākas saknē. Skatiet vPlus video atskaņotāju, lai uzzinātu vairāk par šī faila formātu un ģenerēšanu. Subtitru failam jābūt manuāli izvilktam no videoklipa; Skatiet //engedu/common/vplus/README.md lai iegūtu sīkāku informāciju un rīku parakstu faila ģenerēšanai.
Turklāt elementā devsite-vplus ir jāietver elements ar klasi devsite-vplus-content-container . Savukārt šim elementam ir jābūt elementam ar klasi devsite-vplus-slide-frame .
Tiek pieņemts, ka katrs elements devsite-vplus-slide-frame elementā ir slaids. Slaidiem jābūt uzskaitītiem hronoloģiskā secībā. Katram slaida elementam ir jābūt atribūtam data-start-time kas norāda laiku veselās sekundēs, kad šis slaids ir jāparāda. Turklāt katram slaidam var būt data-video-mode atribūts. Šim atribūtam ir divas derīgas vērtības:
- "liels": liek videoklipam aizņemt lielāko daļu slaida vietas, pārklājot slaidu.
- "apturēts": tiek apturēts videoklips, kad tiek sasniegts šis slaids.
Ja datu video režīms nav norādīts, video pēc noklusējuma tiek iestatīts mazs izmērs.
Slaidu autori, iespējams, vēlēsies saviem slaidiem norādīt papildu CSS. Tā kā slaidi ir ietverti div ar klasi devsite-vplus-slide-frame , slaidiem raksturīgos CSS stilus var sadalīt šīs klases pakārtotajos elementos.
Piemēram:
<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>
Kad lapā tiek parādīts logrīks vPlus, video atskaņotājs netiek startēts automātiski, taču pēc tam, kad lietotājs nospiež atskaņošanas pogu, slaidi un paraksti, ja tie tiek rādīti, tiek automātiski virzīti uz priekšu. Lai mijiedarbotos ar logrīku, lietotāji var izmantot arī tālāk norādītās peles un tastatūras darbības.