Question

我正在开发一个全宽/全高介绍视频(100vw / 100vh)的页面，看起来是“全屏”，直到您向下滚动。

目前我正在使用HTML5 <video>来实现这一目标，但我注意到页面可能会有些不稳定，特别是在滚动时。视频大约是4mb。

如果我要用<video>替换<canvas>，并且直接通过画布对象加载视频帧，我会看到性能提升吗？这两个元素都是GPU加速所以我认为它不应该有所作为，但我不确定。

Answer 1

不，解码视频帧的所有成本仍然存在。除此之外，使用画布会增加更多成本，而不是更少。

如果视频没有声音，您可以在滚动时临时暂停视频，并在视野外暂停视频：

var vt;
window.onscroll = function() {
    video.pause();                                  // pause video
    clearTimeout(vt);                               // clear timer
    vt = setTimeout(function() {                    // create a new timer
      var r = video.getBoudingClientRect();         // abs. bound
      if (window.scrollY < r.height) video.play();  // assumes video is in top
   }, 70);                                          // 70ms
    ...
};

另一个关键是，尽管不是非常差别很大，但要确保视频代码易于解码。你可以通过消除噪音，使用平面颜色和大表面，良好的光照条件，低景深来模糊背景以及降低对比度以及避免主要主题中的太多细节来实现这一目标（这也将产生较小的文件）。

var video = document.querySelector("video"),
    vt;

window.onscroll = function() {
  video.pause();
  clearTimeout(vt);
  vt = setTimeout(function() {
    var r = video.getBoundingClientRect();
    if (window.scrollY < r.height) video.play();
  }, 70);
};

html, body {width:100%; height: 2000px}
video {
  width:100%;
  height:auto;
}

<video muted width="500" height="280" autoplay="true">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>

哪个更高效，<video>或<canvas>带有视频嵌入？

1 个答案: