MSE Safari Full Append Timed

100% I-Frames

by dustinkerstein

HTML

<video></video>

CSS

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

video {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var sourceBuffer;
var ms = new MediaSource();
var url = "https://files.panomoments.com/uhd_dashinit.mp4" // 100% I-Frames
var video = document.querySelector('video');
var t0, t1;

video.src = window.URL.createObjectURL(ms); // Try commenting this and use the commnented out fetch below

/* fetch(url).then(function(response) {
  response.arrayBuffer().then(function(myArrayBuffer) {
    video.src = window.URL.createObjectURL(new Blob([myArrayBuffer], {type: "video/mp4"})); // Seeking with blob occasionally shows XPC memory issue
  });
}); */

ms.addEventListener('sourceopen', onMediaSourceOpen);

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

video.addEventListener('seeked', (event) => {
	t1 = performance.now();
  console.log('Seek time: ' + (t1-t0));
});

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

function onKey (e) {
  var key = e.key;
  //console.log(sourceBuffer.buffered.length,sourceBuffer.buffered.start(0),sourceBuffer.buffered.end(0))
  switch (key) {
    case "1":
    	t0 = performance.now();
      video.currentTime = 242; // 243 frames total
      break;
    case "2":
      t0 = performance.now();
      video.currentTime = 241;
      break;
   case "3":
      t0 = performance.now();
      video.currentTime = 100;
      break;
   case "4":
      t0 = performance.now();
      video.currentTime = 10;
      break;
   case "8":
      t0 = performance.now();
      video.currentTime = 2;
      break;
   case "9":
      t0 = performance.now();
      video.currentTime = 1;
      break;
   case "0":
      t0 = performance.now();
      video.currentTime = 0;
      break;
  }
}