JSFiddle - React, Tailwind, and code Playground

HTML

<video id="bbb" 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>
<script>
  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 videoElement = document.getElementById("myvideo");
  var playSprite = function(id) {
  
  
  
  
  
  console.log(videoElement);
  
  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }
  
 ...