全屏视频精灵

我正在尝试创建一个带有视频精灵的小项目，模仿这个用于音频精灵的JSFiddle。

播放工作如预期:点击相关按钮播放视频的相关部分。

现在，然而，我想合并的东西，将使视频播放全屏(或全窗口)，当按钮被按下或当一个键被按下。例如，这里的演示展示了一种方法，如果您在播放视频时单击输入，它将进入全屏模式。

我对JavaScript没有特别的经验，所以解决方案很可能就摆在我面前，如何集成Mozilla文章中所示的方法，但我被难住了。

这是我现在所拥有的，它创建了视频精灵，如预期的那样:

var videoSprite = document.getElementById('bbb');
// sprite data
var spriteData = {
  full: {
    start: 0,
    length: 595
  },
  tentotwenty: {
    start: 10,
    length: 10
  },
  tentothirty: {
    start: 10,
    length: 20
  },
  fiftytoonefifty: {
    start: 50,
    length: 200
  }
};
// current sprite being played
var currentSprite = {};
// time update handler to ensure we stop when a sprite is complete
var onTimeUpdate = function() {
  if (this.currentTime >= currentSprite.start + currentSprite.length) {
    this.pause();
  }
};
videoSprite.addEventListener('timeupdate', onTimeUpdate, false);
// in mobile Safari, the first time this is called will load the audio. Ideally, we'd load the audio file completely before doing this.
var playSprite = function(id) {
  if (spriteData[id] && spriteData[id].length) {
    currentSprite = spriteData[id];
    videoSprite.currentTime = currentSprite.start;
    videoSprite.play();
  }
};

<video id="bbb">
  <source src="https://ia700408.us.archive.org/26/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
</video>
<br />
<br />
<ul>
  <li>
    <button onclick="playSprite('full');">Play full video</button>
  </li>
  <li>
    <button onclick="playSprite('tentotwenty');">Play from 10 to 20 seconds</button>
  </li>
  <li>
    <button onclick="playSprite('tentothirty');">Play from 10 to thirty seconds</button>
  </li>
  <li>
    <button onclick="playSprite('fiftytoonefifty');">Play from 50 to 200 seconds</button>
  </li>
</ul>

关于如何扩展到全屏或全窗口的任何提示将非常感激!