视频 Plus 版

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