Widget (vPlus) memungkinkan penulis membuat slide presentasi HTML yang disinkronkan ke video. Manfaat vPlus dibandingkan video tradisional adalah:
- slide dapat menggunakan fitur DevSite seperti:
Penulis dapat mengontrol apakah video ditampilkan di sudut slide, menutupi seluruh slide, atau dihentikan saat pengguna berinteraksi dengan slide.
Demo
Berikut adalah contoh vPlus yang mendemonstrasikan fiturnya. Tekan tombol Play untuk memulai.
- Poin-poin yang bagus dan informatif
- Poin lainnya yang menarik dan informatif
- Apa yang bisa dicantumkan dalam catatan versus di {i>slide<i} itu sendiri.
- Baik dapat berisi HTML atau markdown
- Apakah akan berguna untuk menampilkan sesuatu kepada penonton atau hanya dalam catatan bahwa penyaji mungkin akan dilihat dan dapat dibacakan dengan keras.
- Pengguna dapat melihat catatan mereka sendiri, biasanya secara offline.
- Catatan bisa menjadi cara menautkan ke demo.
- Video Plus mendorong pemutaran video dan slide
- Mengurangi kebutuhan untuk merekam ulang video jika slide berubah
- Menyediakan transkrip yang dapat ditelusuri
- Menjeda video untuk interaksi pengguna
- Video dapat beralih antara besar dan kecil
Skema
Widget Video Plus dibuat dengan menandai elemen dengan class devsite-vplus. Selain itu, elemen tersebut harus berisi atribut data-video-id yang menentukan ID video YouTube yang akan ditampilkan.
Jika elemen widget juga berisi atribut data-captions-url, elemen ini harus menentukan file json yang berisi teks yang sesuai dengan video. File ini harus berada di direktori yang sama dengan file md atau html, atau jika diawali dengan '/', jalur ke file dimulai di root. Lihat pemutar video vPlus untuk mengetahui detail tentang format dan pembuatan file ini. File teks harus diekstrak secara manual dari video; lihat //engedu/common/vplus/README.md untuk mengetahui detail dan alat untuk menghasilkan file teks.
Selain itu, elemen devsite-vplus harus berisi elemen dengan class devsite-vplus-content-container. Pada gilirannya, elemen tersebut harus berisi elemen dengan class devsite-vplus-slide-frame.
Setiap elemen di dalam elemen devsite-vplus-slide-frame dianggap sebagai slide. Slide harus tercantum dalam urutan kronologis. Setiap elemen slide harus memiliki atribut data-start-time yang menentukan waktu dalam detik penuh saat slide ini harus ditampilkan. Selain itu, setiap slide mungkin memiliki atribut data-video-mode. Atribut tersebut memiliki dua nilai yang valid:
- "besar": menyebabkan video menempati sebagian besar ruang slide, menutupi slide.
- "shentikan": menyebabkan video dijeda saat {i>slide<i} itu tercapai.
Jika data-video-mode tidak ditentukan, ukuran video akan disetel secara default ke ukuran kecil.
Penulis slide mungkin ingin menentukan CSS tambahan untuk slide mereka. Karena slide dimuat dalam div dengan class devsite-vplus-slide-frame, gaya CSS khusus slide dapat diberi namespace untuk elemen turunan class ini.
Contoh:
<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>
Saat widget vPlus ditampilkan di halaman, pemutar video tidak dimulai secara otomatis, tetapi setelah pengguna menekan tombol putar, slide dan teks, jika ditampilkan, akan dilanjutkan secara otomatis. Pengguna juga dapat menggunakan tindakan mouse dan keyboard berikut untuk berinteraksi dengan widget.