Виџет (вПлус) омогућава аутору да креира ХТМЛ слајд дек који је синхронизован са видео записом. Предности вПлус-а у односу на традиционални видео су:
- слајдови могу да користе функције ДевСите-а као што су:
- укључује који олакшавају поновну употребу садржаја
- условљавања за приказ садржаја прилагођеног различитој публици где би се исти слајд односио на интерну технологију за запослене у Гоогле-у и садржај Гоогле Цлоуд платформе за ширу јавност
Аутор може да контролише да ли се видео приказује у углу слајда, покривајући цео слајд, или да ли се зауставља док корисник ступа у интеракцију са слајдом.
Демо
Следи пример вПлус-а који демонстрира његове карактеристике. Притисните дугме Плаи да бисте започели.
- Лепа, информативна тачка
- Још једна лепа, информативна тачка
- Шта би могло да иде у белешку у односу на сам слајд.
- Оба могу да садрже ХТМЛ или маркдовн
- Да ли би било корисно да се нешто прикаже гледаоцу или само у белешкама које би презентер вероватно видео и могао да прочита наглас.
- Корисници могу сами да виде белешке, обично ван мреже.
- Белешке би могле да буду начин повезивања са демонстрацијама .
- Видео Плус покреће видео репродукцију и слајдове
- Смањује потребу за поновним снимањем видеа ако се слајдови промене
- Пружа транскрипт који се може претраживати
- Паузира видео ради интеракције корисника
- Видео се може пребацивати између великих и малих
Шема
Видео Плус виџет се креира означавањем елемента класом devsite-vplus . Поред тога, тај елемент мора да садржи атрибут data-video-id који наводи ИД ИоуТубе видеа који ће бити приказан.
Ако елемент виџета такође садржи атрибут data-captions-url , требало би да наведе јсон датотеку која садржи титлове који одговарају видео снимку. Ова датотека би требало да буде у истом директоријуму као и md или html датотека, или ако почиње са '/', путања до датотеке почиње од корена. Погледајте вПлус видео плејер за детаље о формату и генерисању ове датотеке. Фајл титлова мора бити ручно извучен из видео записа; погледајте //engedu/common/vplus/README.md за детаље и алатку за генерисање датотеке са натписима.
Штавише, елемент devsite-vplus треба да садржи елемент са класом devsite-vplus-content-container . Заузврат, тај елемент треба да садржи елемент са класом devsite-vplus-slide-frame .
Претпоставља се да је сваки елемент унутар елемента devsite-vplus-slide-frame слајд. Слајдови морају бити наведени хронолошким редом. Сваки елемент слајда мора имати атрибут data-start-time који специфицира време у целим секундама када овај слајд треба да буде приказан. Поред тога, сваки слајд може имати атрибут data-video-mode . Тај атрибут има две важеће вредности:
- „велики“: узрокује да видео заузима већину простора на слајду, покривајући слајд.
- „заустављено“: узрокује да се видео паузира када се дође до тог слајда.
Ако дата-видео-моде није наведен, видео ће подразумевано имати малу величину.
Аутори слајдова ће вероватно желети да наведу додатни ЦСС за своје слајдове. Пошто су слајдови садржани у div са класом devsite-vplus-slide-frame , ЦСС стилови специфични за слајдове могу да се распореде по именима подређеним елементима ове класе.
на пример:
<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>
Када се вПлус виџет прикаже на страници, видео плејер се не покреће аутоматски, али након што корисник притисне дугме за репродукцију, слајдови и натписи, ако су приказани, се аутоматски напредују. Корисници такође могу да користе следеће радње миша и тастатуре за интеракцију са виџетом.