requestAnimationFrame2

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 t0 = performance.now();
var url = "https://files.panomoments.com/progressiveResolutionCRF12_240Frames_H264.mp4";
var video = document.createElement('video');
var frame = 0;
var rate = 4;
var blurOrig = 10;
var scaleOrig = 1.0;
var blur = 0;
var scale = 0;
var playing = false;
var finished = false;
var stopwatchFinished = false;
video.muted = true;
video.loop = false;
video.src = url;
video.style.opacity = 0;
video.style.filter = "blur(" + blurOrig + "px)";
video.style.transform = "scale(" + scaleOrig + ")";
document.body.appendChild(video);
window.requestAnimationFrame(render)

function render() {
  window.requestAnimationFrame(render);
  
  if (video.readyState >= 2 && !playing) {
  	playing = true;
    video.play();
    video.playbackRate = rate;
  }
  
  if (playing) {
  	if (!stopwatchFinished) {
    	stopwatchFinished = true;
      console.log((performance.now() - t0).toFixed(2) + "ms" + " frame: " + frame);
    }
  	if (video.currentTime < video.duration) {
    	blur = blurOrig - video.currentTime * video.playbackRate * (blurOrig / video.duration / rate);
      video.style.opacity = 1 - blur / blurOrig;
  		video.style.filter = "blur(" + blur + "px)";
      scale = 1 + ((scaleOrig - 1) * (blur / blurOrig))
      video.style.transform = "scale(" + scale + ")";
      /* console.log("scale: " + scale.toFixed(2) +" opacity: " + parseFloat(video.style.opacity).toFixed(2) + " blur: " + blur.toFixed(2) + "px" + " currentTime: " + video.currentTime.toFixed(2)) */;
    } else if (!finished) {
    	finished = true;
      video.style.opacity = 1;
  		video.style.filter = "blur(0px)";
      video.style.transform = "scale(1.0)";
    	video.pause();
      console.log("Finished");
    }
  }
  frame++;
}

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