HTML5 Canvas - Mirror parts of video

Question

I've found a really awesome slider on a website (https://antoni.de)

The slider has videos set as backgrounds and the transition effect makes the video break into pieces (bars, varying in width, depending on the scrollpos)

How could I achieve a relatively close version of this?

Here's my current code:

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;
}

What could I do?:/

I've found nothing related online, I'm a beginner using html canvases

score 1 · Answer 1 · answered Nov 22 '19 at 15:01

You will need to draw the video onto one canvas, then draw the fragments (in any order you choose) from that canvas onto a second canvas, which will be what's displayed.

This is how all video manipulation is done, for example this (somewhat famous and old) "explosion" example using video and mapping it to the canvas: http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/

o1sound · Answer 2 · 2019-11-22T15:43:27.983

Have a look at the drawImage() documentation on MDN. You can scale and position the video for each frame by adjusting the source and destination parameters in drawImage(). For example, to draw a 20 pixel vertical stripe of video to the far right of the canvas, you would do this:

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
);

Adjust the x value in the destination will slide around the vertical stripes. Adjusting the x value in source will slide around the video. If you set the widths differently the canvas will stretch and scale.

Also you should be using requestAnimationFrame (rAF) instead of setTimeout. rAF let's the browser have more control over when to draw the image, freeing up resources and resulting in really smooth animations. The only time you would want to use setTimeout is if you were very particular about frame rate (how fast things animate) but even then there are ways to throttle rAF. Ideally you want 60 frames per second. rAF will aim for that and start to slow down if there is too much processing during each frame.

HTML5 Canvas - Mirror parts of video

2 Answers2