JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<video></video>

CSS

video {
  width: 100%;
}

JavaScript

var videoInitialized = false,
      videoSeeked = false,
      isUserInteracting = false;

    const LEFTBRACKET = 219;
    const RIGHTBRACKET = 221;

    var sourceBuffer;
    var frameRate;
    var index = 0;
    var segments = [];
    var ms = new MediaSource();
    var videoBits, arrayOfBytes, chunk, file;
    var pause = false;
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(ms);
    ms.addEventListener('sourceopen', onMediaSourceOpen);

    getData('sd_dash.mpd');

    function videoInit(initBytes) {
      videoBits = initBytes;
      chunk = initBytes.slice(0, parseInt(segments[0].getAttribute("mediaRange").toString().split('-')[1]) + 1);
      appendToBuffer(chunk);
    }

    function onMediaSourceOpen() {
      sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
      //sourceBuffer.mode = 'sequence';
    }

    function nextSegment(index) {

      if (index < segments.length) {
          arrayOfBytes = segments[index].getAttribute("mediaRange").toString().split('-');
          chunk = videoBits.slice(arrayOfBytes[0], parseInt(arrayOfBytes[1]) + 1);
          appendToBuffer(chunk);
        }
      
    }

    document.addEventListener('keydown', function (e) {
      var key = e.keyCode;
      switch (key) {
        case LEFTBRACKET:
          --index;
          if (index < 0) {
            index = segments.length - 1;
          }
          nextSegment(index);
          break;
        case RIGHTBRACKET:
          index = (index + 1) % segments.length;
          nextSegment(index);
          break;
      }
    });

    function appendToBuffer(videoChunk) {
      if (sourceBuffer.updating) {
        console.log("Buffer not ready");
      }
      if (videoChunk && !sourceBuffer.updating) {
        video.currentTime = index;
        // video.fastSeek(index);
        //sourceBuffer.timestampOffset = video.currentTime;
        sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
      }
    }

   ...