requestAnimationFrame

MAKE SURE TO CLICK INTO THE RESULT IFRAME OR ELSE SAFARI WILL ONLY RENDER RAF / SETINTERVAL AT MAX 30FPS DUE TO POWER SAVING CODE

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: black; 
}

video {
  width: 100vw;
  height: 100vh;
}

JavaScript

var url = "https://files.panomoments.com/smpte.mp4";
var video = document.createElement('video');
var frameCount = 0;
var frameRate = 1;
var direction = 1;
video.muted = true;
video.loop = true;
document.body.appendChild(video);
window.requestAnimationFrame(render)

function render() {
  window.requestAnimationFrame(render);
  if (video.readyState >= 2) {
  	frameCount++;
  	var newTime = video.duration - frameCount * (1 / frameRate);
    if (newTime <= 0) {
    	newTime = video.duration;
      frameCount = 0;
    }
    console.log(newTime)
    video.currentTime = newTime;
  }
}

fetch(url).then(function(response) {
  response.blob().then(function(blob) {
    video.src = window.URL.createObjectURL(blob);
  });
});