Split html canvas with video in 3 sections

Question

I want to show a very wide video (12000px) on a web page in 3 different sections of 4000px width, like in this image

I know that this can be done with canvas, but really I can't get it to work.

I already saw some examples but I didn't found this case in particular. Thanks in advance for any help.

-- edit --

The ideal solution would be having an animation like in this pen http://www.codepen.io/sephhh/pen/OVpELO?editors=1010

<canvas id="myCanvas" height=200 width=200 style="border:1px solid #000000;"></canvas>

---

// set up initial variables
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(100,200);
ctx.stroke();

function drawCircle(x){
  ctx.beginPath();
  ctx.arc(x,100,10,0,2*Math.PI);
  ctx.fillStyle="red";
  ctx.fill();
}
var x = 0;
setInterval(function(){ 
  ctx.clearRect(0,0,200,200);
  drawCircle(x%200);
  x++;
}, 25);

to have the same effect of starting in the 1st section an continue to the others using something like in this example where the canvas is spread in rectangles: http://craftymind.com/factory/html5video/CanvasVideo.html

Answer 1

That's actually not that hard to do.

First you have to create three canvas elements, eachs height equal the height of the video and the width is a third of the video's width.

Inside a loop triggered by e.g. setInterval you can draw specific parts of the source video to each canvas using the drawImage() method.

The drawImage method accepts several parameters - we need 9 of them. context.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);

source: the video

sourceX, sourceY, sourceWidth and sourceHeight: These define a rectangular area of the source we want to draw on the canvas. So for the first canvas this would be the left third of the video.

targetX, targetY: these determine the coordinates we want to draw the image at - always 0,0

targetWidth: will always be a third of the video targetHeight: equal to the video's height

Here's an example:

var canvas;
var theVideo = document.getElementById("video");
var segment = theVideo.width / 3;
for (var a = 0; a < 3; a++) {
  canvas = document.getElementById("canvas" + a)
  canvas.width = segment;
  canvas.height = document.getElementById("video").height;
}

function draw() {
  for (var a = 0; a < 3; a++) {
    document.getElementById("canvas" + a).getContext("2d").drawImage(theVideo, a * segment, 0, segment, theVideo.height, 0, 0, document.getElementById("canvas" + a).width, document.getElementById("canvas" + 0).height);
  }
}
var interval = setInterval(draw, 20);

section {
  float: left;
  width: 100%
}

<video id="video" width="320" height="176" loop preload autoplay muted style="display:none">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

<section>
  <canvas id="canvas0"></canvas>
</section>
<section>
  <canvas id="canvas1"></canvas>
</section>
<section>
  <canvas id="canvas2"></canvas>
</section>