MSE Safari Full Append Timed With Controls

100% I-Frames

by dustinkerstein

HTML

<video controls></video>

CSS

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

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

JavaScript

var sourceBuffer;
var ms = new MediaSource();
ms.addEventListener('sourceopen', onMediaSourceOpen);
var url = "https://data.panomoments.com/processed/5849a51bc26d08000b62f9f8/5c95d9843c344e001f1588f6/uhd_dashinit.mp4" // 100% I-Frames
var video = document.querySelector('video');

video.src = window.URL.createObjectURL(ms); // Try commenting this and use the commented 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
  });
}); */
  
function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
  fetch(url).then(function(response) {
  	response.arrayBuffer().then(function(myArrayBuffer) {
    	sourceBuffer.appendBuffer(myArrayBuffer);
    });
  });
}

video.addEventListener('seeked', (event) => {
  console.log('Seek', event);
});