The widget (vPlus) allows the author to create an HTML slide deck that is synchronized to a video. The benefits of vPlus over a traditional video are:
- slides can use DevSite features such as:
- includes which make it easy to reuse content
- conditionals to show content tailored to different audiences where the same slide would refer to internal technology for Googlers, and Google Cloud Platform content for the general public
The author can control whether the video is shown in a corner of the slide, covering the entire slide, or stopped while the user interacts with a slide.
Demo
The following is an example of vPlus demonstrating its features. Press the Play button to start.
- Nice, informative bullet point
- Another nice, informative bullet point
- What could go in the note versus in the slide itself.
- Either can contain HTML or markdown
- 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.
- Users may view notes themselves, usually offline.
- Notes could be a way of linking to demos.
- Video Plus drives video play and slides
- Reduces need to reshoot video if slides change
- Provides searchable transcript
- Pauses video for user interactions
- Video can switch between large and small
Schema
A Video Plus widget is created by marking an element with the class devsite-vplus. In addition, that element must contain a data-video-id attribute specifying the id of the YouTube video that is to be shown.
If the widget element also contains a data-captions-url attribute, it should specify a json file containing the captions corresponding to the video. This file should either be in the same directory as the md or html file, or if it starts with a '/', the path to the file starts at the root. See vPlus video player for details on the format and generation of this file. The captions file must be manually extracted from the video; see //engedu/common/vplus/README.md for details and a tool to generate the captions file.
Furthermore, the devsite-vplus element should contain an element with the class devsite-vplus-content-container. In turn, that element should contain an element with the class devsite-vplus-slide-frame.
Each element inside the devsite-vplus-slide-frame element is assumed to be a slide. The slides must be listed in chronological order. Each slide element must have a data-start-time attribute specifying the time in whole seconds when this slide should be displayed. In addition, each slide may have a data-video-mode attribute. That attribute has two valid values:
- "large": causes the video to occupy most of the slide space, covering the slide.
- "stopped": causes the video to be paused when that slide is reached.
If data-video-mode is not specified, the video defaults to its small size.
Slide authors will probably want to specify extra CSS for their slides. Since the slides are contained in a div with class devsite-vplus-slide-frame, slide-specific CSS styles can be namespaced to child elements of this class.
For example:
<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>
When the vPlus widget is displayed on a page, the video player is not automatically started, but after the user hits the play button, the slides and the captions, if displayed, are advanced automatically. Users may also use the following mouse and keyboard actions to interact with the widget.