Simple Safari Video

by dustinkerstein

HTML

<video></video>

CSS

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

JavaScript

// Note this test is succeptible to behavior described here - https://bugs.webkit.org/show_bug.cgi?id=211295

var index = 0;
var video = document.querySelector('video');
var src = "https://files.panomoments.com/uhd_dashinit.mp4"; // 100% I-Frames
video.preload = 'auto';
video.muted = true;

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

fetch(src).then(function(response) {
  response.blob().then(function(myBlob) {
    video.src = window.URL.createObjectURL(myBlob);
    setInterval(render, 5);
  });
});

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