Widget (vPlus), yazarın bir videoyla senkronize edilen bir HTML slayt kümesi oluşturmasına olanak tanır. vPlus'ın geleneksel videolara göre avantajları:
- slaytlar aşağıdakiler gibi DevSite özelliklerini kullanabilir:
- İçeriğin yeniden kullanılmasını kolaylaştıran şunlar içerir:
- Google çalışanları için dahili teknolojiye, herkese açık Google Cloud Platform içeriğine de değinen aynı slaytın yer aldığı, farklı kitlelere özel olarak oluşturulmuş içerikleri göstermek için koşullu değerler
Yazar, videonun slaydın bir köşesinde mi, slaydın tamamını kaplayarak mı gösterileceğini yoksa kullanıcı slaytla etkileşimde bulunurken mi durdurulacağını kontrol edebilir.
Demo
Aşağıda, özelliklerini gösteren bir vPlus örneği verilmiştir. Başlamak için Oynat düğmesine basın.
- Güzel ve bilgilendirici bir madde işareti
- Başka bir güzel ve bilgilendirici madde daha
- Notta ve slaytta neler yer alabileceği.
- HTML veya Markdown içerebilir
- İzleyiciye bir şey göstermenin yararlı olup olmadığı veya yalnızca sunum yapan kişinin muhtemelen görebilir ve sesli okuyabilir.
- Kullanıcılar notları kendileri (genellikle çevrimdışı) görüntüleyebilir.
- Notlar, projede yer alan demolara bağlantı verin.
- Video Plus, video oynatmayı ve slaytları destekler.
- Slaytlar değişirse videoyu yeniden çekme ihtiyacını azaltır
- Aranabilir transkript sunar
- Kullanıcı etkileşimleri için videoyu duraklatır.
- Videoda büyük ve küçük öğeler arasında geçiş yapılabilir
Şema
Video Plus widget'ı, bir öğe devsite-vplus sınıfıyla işaretlenerek oluşturulur. Ayrıca bu öğe, gösterilecek YouTube videosunun kimliğini belirten bir data-video-id özelliği içermelidir.
Widget öğesi bir data-captions-url özelliği de içeriyorsa videoya karşılık gelen altyazıları içeren bir json dosyası belirtilmelidir. Bu dosya, md veya html dosyasıyla aynı dizinde olmalıdır. Dosya "/" karakteriyle başlıyorsa dosyanın yolu kök dizinde başlar. Bu dosyanın biçimi ve oluşturulmasıyla ilgili ayrıntılar için vPlus video oynatıcısına bakın. Altyazı dosyası videodan manuel olarak çıkarılmalıdır; Ayrıntılar ve altyazı dosyasını oluşturma aracı için //engedu/common/vplus/README.md adresini ziyaret edin.
Ayrıca, devsite-vplus öğesi devsite-vplus-content-container sınıfına sahip bir öğe içermelidir. Buna karşılık, bu öğe devsite-vplus-slide-frame sınıfına sahip bir öğe içermelidir.
devsite-vplus-slide-frame öğesinin içindeki her öğenin slayt olduğu varsayılır. Slaytlar kronolojik sırada listelenmelidir. Her slayt öğesinde, bu slaytın gösterilmesi gereken zamanı tam saniye cinsinden belirten bir data-start-time özelliği olmalıdır. Buna ek olarak, her slaytta bir data-video-mode özelliği olabilir. Bu özelliğin iki geçerli değeri vardır:
- "large": Videonun, slayt alanının çoğunu kaplayarak slaytı kaplamasına neden olur.
- "stopped": Söz konusu slayta ulaşıldığında videonun duraklatılmasını sağlar.
data-video-mode belirtilmezse video varsayılan olarak küçük boyutuna ayarlanır.
Slayt yazarları muhtemelen slaytları için fazladan CSS belirtmek isteyecektir. Slaytlar devsite-vplus-slide-frame sınıfında bir div içinde bulunduğundan, slayta özgü CSS stilleri, bu sınıfın alt öğelerine adlandırılabilir.
Örneğin:
<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>
Bir sayfada vPlus widget'ı görüntülendiğinde video oynatıcı otomatik olarak başlatılmaz, ancak kullanıcı oynat düğmesine bastıktan sonra slaytlar ve gösteriliyorlarsa altyazılar otomatik olarak geliştirilir. Kullanıcılar, widget'la etkileşimde bulunmak için aşağıdaki fare ve klavye işlemlerini de kullanabilir.