Question

我在网站（https://antoni.de）上找到了一个很棒的滑块

滑块将视频设置为背景，过渡效果使视频分成碎片（条形，宽度不同，取决于滚动位置）

如何获得相对接近的版本？

这是我当前的代码：

HTML + jQuery：

<div id="slider">
   <canvas id="c" width='1920px' height='1080px'></canvas>
   <video id="v" preload="auto" autoplay="" loop="" muted="">
      <source src="common/vid/stage_loop.mp4">
   </video>
 </div>
<script>
        // Copy video to canvas
        document.addEventListener('DOMContentLoaded', function(){
            var v = document.getElementById('v');
            var canvas = document.getElementById('c');
            var context = canvas.getContext('2d');


            v.addEventListener('play', function(){
                draw(this,context,canvas.width,canvas.height);
            },false);

        },false);

        function draw(v,c,w,h) {
            if(v.paused || v.ended) return false;
            c.drawImage(v,0,0,w,h);
            setTimeout(draw,20,v,c,w,h);
        }


</script>

Css：

#slider {
    display: block;
    width: 100%;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    position: relative;
}
#slider canvas {
    position: absolute;

    top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 1920px;
  min-height: 1080px;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#slider video {

    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}

我该怎么办？：/

我在网上找不到任何相关内容，我是使用html画布的初学者

Answer 1

您需要将视频绘制到一个画布上，然后将该画布上的片段（以您选择的任何顺序）绘制到第二个画布上，这将显示出来。

这是完成所有视频操作的方式，例如，这个（有点著名和古老的）“爆炸”示例使用视频并将其映射到画布： http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/

Answer 2

看看drawImage() documentation on MDN。您可以通过调整source中的destination和drawImage()参数来缩放和定位每个帧的视频。例如，要在画布的最右边绘制20像素的垂直视频条纹，您可以这样做：

ctx.drawImage(
    v,            // video frame
    0,0,20,h,     // source:  x=0, width 20
    w-20,0,20,h   // destination:  x=(w-20), width 20
);

调整目标位置的x值将围绕垂直条纹滑动。在源中调整x值将在视频周围滑动。如果您设置不同的宽度，则画布将拉伸和缩放。

此外，您应该使用requestAnimationFrame（rAF）而不是setTimeout。通过rAF，浏览器可以更好地控制何时绘制图像，释放资源并获得真正流畅的动画。唯一要使用setTimeout的时间是，如果您对帧速率（动画速度有多快）非常关注，但是即使如此，也可以使用throttle rAF。理想情况下，您希望每秒60帧。 rAF会以此为目标，如果在每个帧中处理过多，就会开始放慢速度。

HTML5画布-镜像视频的一部分

2 个答案: