MSE Safari Full Append

100% I-Frames

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" // 100% I-Frames
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);

function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
  fetch(url).then(function(response) {
  	response.arrayBuffer().then(function(myArrayBuffer) {
    	sourceBuffer.appendBuffer(myArrayBuffer);
    	animate();
    });
  });
}

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

function render() {
  window.requestAnimationFrame(render);
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    index = (index + 1) % 243;
    video.fastSeek(index);
  }
}

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;
  }
}