Question

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

它可以正常工作，但是我注意到有时动画会卡在帧中，或者动画会变慢且不稳定，看起来像浏览器因为高速缓存每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>

视频到Window.sessionStorage

0 个答案: