Frame Accurate Seeking

by dustinkerstein

HTML

<body>
 <progress id="progress" value="0"></progress>
 <video id="myvideo" width="300px"></video>
</body>

JavaScript

var progressBar = document.getElementById("progress"), display = document.getElementById("display");
var sourceBuffer;
var frameRate;
var index = 0;
var segments = [];
var ms = new MediaSource();
var videoBits, arrayOfBytes, chunk, file, initBytes;
const LEFTBRACKET = 219;
var counter = 1;
                

getData('Intersection64fps1920CRF12_dash.mpd');
var video = document.getElementById('myvideo');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);
document.addEventListener('keydown', function (e) {
  var key = e.keyCode;
  switch (key) {
    case LEFTBRACKET:
      --index;
      if (index < 0) {
        index = 0;
      }
      video.currentTime = index * (1 / frameRate);
      break;
    case RIGHTBRACKET:
      ++index;
      video.currentTime = index * (1 / frameRate);
      break;
  }
});

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

function delayedBuffer() {
  if (counter != segments.length) {
      arrayOfBytes = segments[counter].getAttribute("mediaRange").toString().split('-');
      chunk = initBytes.slice(arrayOfBytes[0], parseInt(arrayOfBytes[1]) + 1);
			sourceBuffer.timestampOffset = counter * (1 / frameRate);
		  appendToBuffer(chunk);
			counter++;
  }
}

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

function appendToBuffer(videoChunk) {
  if (sourceBuffer.updating) {
    console.log("Buffer not ready");
  }
  if (videoChunk && !sourceBuffer.updating) {
    sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
  }
}

function getData(url) {
  if (url !== "") {
    url = "https://files.panomoments.com/" + url;
    var xhr = new XMLHttpRequest(); // Set up xhr request
    xhr.open("GET", url,...