video to Window.sessionStorage

Question

I made a github-page with a little animation on canvas and scroll, by loading a really small (600KB on the webm version and 2MB on the mp4 version) loop video and re-painting second by second on scroll event.

It works perfectly but I've noticed that some times the animation gets stuck in a frame or the animation gets slower and not fluid and looks like the browser seeks for the data on-line because the cache max-age each 10 minutes.

How can I sessionstore my video.currentsrc in the browser to have it on hand for canvas??

Or is there another better way you can suggest me?

var canvas = document.getElementById("video");
var ctx = canvas.getContext('2d');
var fish = document.getElementById("fish");
fish.load();

var lastScrollTop = 0;
var fwo = 0,
  fho = 0,
  fw, fh, ft = 0;

function fishSetup() {
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
  fw = (canvas.height * fish.videoWidth) / fish.videoHeight;
}
fish.addEventListener('loadeddata', function() {
  fishSetup();
  render(fish);
  $(document).keydown(function(event) {
    if (event.keyCode == 37) {
      //console.log('prev');
      ft -= 1;
    } else if (event.keyCode == 39) {
      //console.log('next');
      ft += 1;
    }
    if (ft >= fish.duration) {
      ft = 0;
    } else if (ft <= 0) {
      ft = fish.duration;
    }
    fish.currentTime = ft;
  });
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      //console.log("down")
      ft += 1;
    } else {
      //console.log("up")
      ft -= 1;
    }
    if (ft >= fish.duration) {
      ft = 0;
    } else if (ft <= 0) {
      ft = fish.duration;
    }
    lastScrollTop = st;
    fish.currentTime = ft;
  });
}, false);


fish.onseeked = function() {
  render(fish);
};

function render(video) {
  ctx.drawImage(video, fwo, fho, fw, canvas.height);
}

video {
  display: none;
}

section {
  width: 100%;
  height: 100000000000000000px;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <video id="fish" style="display: fixed !important;" muted crossorigin>
  <source src="https://mauriciovillegasbelmont.github.io/portafolio/assets/vid/fish-30s_1fps_30q_5kf.webm" type="video/webm">
  <source src="https://mauriciovillegasbelmont.github.io/portafolio/assets/vid/fish-30s_1fps_0-5mbr_5kf.mp4" type="video/mp4">
</video>
  <canvas id="video">
        your browser dosn´t soppourt canvas
</canvas>
</section>