MSE Safari Full Append Seeked

by dustinkerstein

HTML

<video id="PanoMoment"></video>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

#PanoMoment {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var sourceBuffer;
var index = 0;
var ms = new MediaSource();
var url = "https://files.panomoments.com/uhd_dashinit.mp4"
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);

video.addEventListener('seeked', (event) => {
  seeked++;
  console.log('seeked: ' + seeked + " count: " + count);
});

fetch(url).then(function(response) {
  response.arrayBuffer().then(function(myArrayBuffer) {
    sourceBuffer.appendBuffer(myArrayBuffer);
    animate();
  });
});

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

function animate() {
  window.requestAnimationFrame(render);
}

var seeked = 0;
var count = 0;
function render() {
  window.requestAnimationFrame(render);
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    index = (index + 1) % 243;
    video.currentTime = index;
    //video.fastSeek(index);
    count++;
  }
}

document.addEventListener('keypress', onKey, false);

function onKey (e) {
  var key = e.key;
  switch (key) {
    case "[":
      index = (index - 1) % 243;
      if (index < 0) index = 242;
      video.fastSeek(index);
      break;
    case "]":
      index = (index + 1) % 243;
      video.fastSeek(index);
      break;
  }
}