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 file;
const LEFTBRACKET = 219;
const RIGHTBRACKET = 221;

getData('Kids100fps1920CRF7_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 / 100);
      break;
    case RIGHTBRACKET:
      ++index;
      video.currentTime = index * (1 / 100);
      break;
  }
  sourceBuffer.timestampOffset = video.currentTime;
});

function videoInit(initBytes) {
  sourceBuffer.appendBuffer(new Uint8Array(initBytes));
}

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

function getData(url) {
  if (url !== "") {
    url = "https://files.panomoments.com/" + url;
    var xhr = new XMLHttpRequest(); // Set up xhr request
    xhr.open("GET", url, true); // Open the request
    xhr.responseType = "text"; // Set the type of response expected
    xhr.send();

    //  Asynchronously wait for the data to return
    xhr.onreadystatechange = function () {
      if (xhr.readyState == xhr.DONE) {
        var tempoutput = xhr.response;
        var parser = new DOMParser(); //  create a parser object

        // Create an xml document from the .mpd file for searching
        var xmlData = parser.parseFromString(tempoutput, "text/xml", 0);

        // Get and display the parameters of the .mpd file
        getFileType(xmlData);
      }
    }

    //  Report errors if they happen during xhr
    xhr.addEventListener("error", function (e) {
      console.log("Error: " + e + " Could not load...