Non-Zero Duration MSE Seek Test

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: 50%;
}

JavaScript

var sourceBuffer;
var ms = new MediaSource();
var url = "https://files.panomoments.com/duration_dashinit.mp4"; // Seek bug still happens with non-zero duration
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);
    });
  });
}