HTML5 Canvas - 视频的镜像部分

Question

我在网站上发现了一个非常棒的 slider (https://antoni.de)

slider 将视频设置为背景，过渡效果使视频分成几 block (条，宽度不同，取决于滚动位置)

我怎样才能获得一个相对接近的版本？

这是我当前的代码:

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 canvas 的初学者

Answer 1

您需要将视频绘制到一个 Canvas 上，然后将该 Canvas 上的片段(以您选择的任何顺序)绘制到第二个 Canvas 上，这将是显示的内容。

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