HTML5画布-视频的镜像部分

我在一个网站上发现了一个非常棒的滑块（）

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

我怎样才能得到一个相对接近的版本呢

以下是我当前的代码：

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>

#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画布的初学者

您需要将视频绘制到一个画布上，然后将该画布上的片段（按照您选择的任何顺序）绘制到第二个画布上，这将是显示的内容

所有视频操作都是这样完成的，例如，使用视频并将其映射到画布的这个（有点著名和古老的）“爆炸”示例：

请看一看。通过调整

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值将在视频中滑动。如果设置不同的宽度，画布将拉伸和缩放

您还应该使用（rAF）而不是

setTimeout

。rAF让浏览器能够更好地控制何时绘制图像，释放资源并生成真正平滑的动画。你唯一想使用setTimeout的时候是，如果你对帧速率（动画的速度）非常挑剔的话，但即使这样，还是有办法提高rAF。理想情况下，您需要每秒60帧。rAF将瞄准这一点，如果在每一帧中有太多的处理，rAF将开始减速