0

我通过加载一个非常小的（webm 版本为 600KB，mp4 版本为 2MB）循环视频并在滚动事件上逐秒重新绘制，在画布和滚动上制作了一个带有小动画的 github 页面。

它工作得很好，但我注意到有时动画会卡在一个帧中，或者动画变慢并且不流畅，并且看起来浏览器会在线寻找数据，因为缓存的 max-age 每 10 分钟一次。

如何将我的 video.currentsrc 会话存储在浏览器中以便将其用于画布？

或者有没有其他更好的方法可以推荐给我？

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>

4

0 回答 0