Video Plus

Pripomoček (vPlus) omogoča avtorju, da ustvari diapozitiv HTML, ki je sinhroniziran z videoposnetkom. Prednosti vPlus pred tradicionalnim videom so:

  • diapozitivi lahko uporabljajo funkcije DevSite, kot so:
    • vključuje , ki olajšajo ponovno uporabo vsebine
    • pogojniki za prikaz vsebine, prilagojene različnim ciljnim skupinam, pri čemer bi se isti diapozitiv nanašal na notranjo tehnologijo za Googlove zaposlene in vsebino Google Cloud Platform za splošno javnost

Avtor lahko nadzira, ali se videoposnetek prikaže v kotu diapozitiva in pokriva celoten diapozitiv ali se ustavi, medtem ko uporabnik komunicira z diapozitivom.

Demo

Sledi primer vPlus, ki prikazuje njegove funkcije. Za začetek pritisnite gumb Predvajaj .

vPlus Demo
Opomba za 'naslovni' diapozitiv.
Ta diapozitiv je bil namerno prazen.
Lep informativni diapozitiv
  • Lepa, informativna točka
  • Še ena lepa, informativna točka
Zelo meta. V tem zapisu bi lahko govorili o več stvareh:
  • Kaj bi lahko bilo v opombi v primerjavi s samim diapozitivom.
    • Lahko vsebuje HTML ali markdown
    • Ali bi bilo uporabno nekaj prikazati gledalcu ali le v zapisih, ki bi jih voditelj verjetno videl in lahko prebral na glas.
  • Uporabniki si lahko sami ogledajo zapiske, običajno brez povezave.
  • Opombe so lahko način povezovanja s predstavitvami .
Lepa, informativna mačja slika
Tukaj je nekaj interaktivnih vsebin
Kakšne barve je nebo?
Modra
Toda ali veste zakaj ?
Vijolična
res ne
Indigo
Blizu, a ne povsem
zelena
S katerega planeta si?
Upoštevajte, da ko pridete do interaktivnega diapozitiva, morate za nadaljevanje klikniti gumb »Predvajaj« ali gumb »Naslednji diapozitiv«.
Tukaj je še nekaj interaktivnih vsebin - Blockly
Hvala za ogled!
  • Video Plus poganja predvajanje videa in diapozitivov
  • Zmanjša potrebo po ponovnem snemanju videa, če se diapozitivi spremenijo
  • Zagotavlja prepis po iskanju
  • Začasno ustavi videoposnetek zaradi uporabniških interakcij
  • Video lahko preklaplja med velikim in majhnim

Shema

Gradnik Video Plus se ustvari tako, da se element označi z razredom devsite-vplus . Poleg tega mora ta element vsebovati atribut data-video-id , ki določa ID videoposnetka YouTube, ki bo prikazan.

Če element gradnika vsebuje tudi atribut data-captions-url , mora podati datoteko json, ki vsebuje napise, ki ustrezajo videoposnetku. Ta datoteka mora biti v istem imeniku kot datoteka md ali html ali če se začne z '/', se pot do datoteke začne pri korenu. Za podrobnosti o formatu in generiranju te datoteke glejte video predvajalnik vPlus. Datoteko z napisi je treba ročno ekstrahirati iz videa; glejte //engedu/common/vplus/README.md za podrobnosti in orodje za ustvarjanje datoteke z napisi.

Poleg tega mora element devsite-vplus vsebovati element z razredom devsite-vplus-content-container . Ta element bi moral vsebovati element z razredom devsite-vplus-slide-frame .

Predpostavlja se, da je vsak element znotraj elementa devsite-vplus-slide-frame diapozitiv. Diapozitivi morajo biti navedeni v kronološkem vrstnem redu. Vsak element diapozitiva mora imeti atribut data-start-time , ki določa čas v celih sekundah, ko naj bo ta diapozitiv prikazan. Poleg tega ima lahko vsak diapozitiv atribut data-video-mode . Ta atribut ima dve veljavni vrednosti:

  • "large": povzroči, da videoposnetek zasede večino prostora na diapozitivu in prekrije diapozitiv.
  • "stopped": povzroči zaustavitev videoposnetka, ko dosežete ta diapozitiv.

Če data-video-mode ni podan, je video privzeto nastavljen na majhno velikost.

Avtorji diapozitivov bodo verjetno želeli določiti dodaten CSS za svoje diapozitive. Ker so diapozitivi vsebovani v div z razredom devsite-vplus-slide-frame , je mogoče sloge CSS, specifične za diapozitiv, dodeliti imenskemu prostoru podrejenim elementom tega razreda.

Na primer:

<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>

Ko je gradnik vPlus prikazan na strani, se predvajalnik videoposnetkov ne zažene samodejno, ampak ko uporabnik pritisne gumb za predvajanje, se diapozitivi in ​​napisi, če so prikazani, samodejno premaknejo naprej. Uporabniki lahko za interakcijo s pripomočkom uporabljajo tudi naslednja dejanja miške in tipkovnice.