Long GOP MSE Safari Full Append Timed With Controls

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();
var url = "https://files.panomoments.com/native_uhd_dashinit.mp4" // Created with: ffmpeg -y -r 1 -i smpte_uhd_dashinit.mp4 -c:v libx264 -g 1000 -keyint_min 1000 -bf 0 -profile:v high -level 4.1 -vf "scale=3840:2160" -crf 32 -pix_fmt yuv420p native_uhd.mp4
var video = document.querySelector('video');

video.src = window.URL.createObjectURL(ms);

ms.addEventListener('sourceopen', onMediaSourceOpen);

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

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