Widget (vPlus) umožňuje autorovi vytvořit sadu snímků HTML, která je synchronizována s videem. Výhody vPlus oproti tradičnímu videu jsou:
- snímky mohou používat funkce DevSite, jako jsou:
Autor může ovládat, zda se video zobrazí v rohu snímku, pokryje celý snímek, nebo se zastaví, když uživatel se snímkem komunikuje.
Demo
Následuje příklad vPlus demonstrující jeho funkce. Začněte stisknutím tlačítka Přehrát .
- Pěkná, informativní odrážka
- Další pěkná, informativní odrážka
- Co by mohlo jít do poznámky oproti samotnému snímku.
- Buď může obsahovat HTML nebo markdown
- Zda by bylo užitečné něco divákovi zobrazit nebo pouze v poznámkách, které by přednášející pravděpodobně viděl a mohl by si je nahlas přečíst.
- Uživatelé si mohou poznámky prohlížet sami, obvykle offline.
- Poznámky mohou být způsobem propojení s ukázkami .
- Video Plus řídí přehrávání videa a snímky
- Snižuje potřebu znovu natáčet video, pokud se snímky změní
- Poskytuje prohledávatelný přepis
- Pozastaví video pro interakci uživatele
- Video lze přepínat mezi velkým a malým
Schéma
Widget Video Plus se vytvoří označením prvku třídou devsite-vplus . Kromě toho musí tento prvek obsahovat atribut data-video-id určující id videa YouTube, které se má zobrazit.
Pokud prvek widgetu obsahuje také atribut data-captions-url , měl by specifikovat soubor json obsahující titulky odpovídající videu. Tento soubor by měl být buď ve stejném adresáři jako soubor md nebo html , nebo pokud začíná znakem '/', cesta k souboru začíná u kořene. Podrobnosti o formátu a generování tohoto souboru najdete v přehrávači videa vPlus. Soubor titulků musí být z videa extrahován ručně; podrobnosti a nástroj pro generování souboru titulků najdete v //engedu/common/vplus/README.md .
Kromě toho by prvek devsite-vplus měl obsahovat prvek s třídou devsite-vplus-content-container . Tento prvek by zase měl obsahovat prvek s třídou devsite-vplus-slide-frame .
Předpokládá se, že každý prvek uvnitř prvku devsite-vplus-slide-frame je snímek. Snímky musí být uvedeny v chronologickém pořadí. Každý prvek snímku musí mít atribut data-start-time určující čas v celých sekundách, kdy má být tento snímek zobrazen. Kromě toho může mít každý snímek atribut data-video-mode . Tento atribut má dvě platné hodnoty:
- "velký": způsobí, že video zabere většinu místa na snímku a zakryje snímek.
- "zastaveno": způsobí pozastavení videa při dosažení tohoto snímku.
Pokud není zadán režim data-video, video se automaticky nastaví na malou velikost.
Autoři snímků budou pravděpodobně chtít pro své snímky zadat další CSS. Vzhledem k tomu, že snímky jsou obsaženy v div s třídou devsite-vplus-slide-frame , lze styly CSS specifické pro snímky přidělit podřízeným prvkům této třídy.
Například:
<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>
Když se na stránce zobrazí widget vPlus, přehrávač videa se nespustí automaticky, ale poté, co uživatel stiskne tlačítko přehrávání, se snímky a titulky, pokud jsou zobrazeny, automaticky posunou. Uživatelé mohou také používat následující akce myši a klávesnice k interakci s widgetem.