Сплит HTML-холст с видео на 3 раздела

Question

Я хочу показать очень широкое видео (12000 пикселей) на веб-странице в 3 различных разделах шириной 4000 пикселей, как на этом изображении

Я знаю, что это можно сделать с помощью canvas, но на самом деле я не могу заставить его работать.

Я уже видел несколько примеров, но я не нашел этот случай в частности. Заранее спасибо за любую помощь.

- редактировать -

Идеальным решением было бы иметь анимацию, как в этой ручке 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);

чтобы иметь тот же эффект, начиная с 1-го раздела и переходя к остальным, используя что-то подобное в этом примере, где полотно разбито на прямоугольники: http://craftymind.com/factory/html5video/CanvasVideo.html

Answer 1

Это на самом деле не так сложно сделать.

Сначала необходимо создать три элемента canvas, высота каждого из которых равна высоте видео, а ширина - треть ширины видео.

Внутри цикла, запускаемого, например, setInterval Вы можете рисовать определенные части исходного видео на каждом холсте, используя метод drawImage () .

Метод drawImage принимает несколько параметров - нам нужно 9 из них. context.drawImage (source, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);

источник: видео

sourceX, sourceY, sourceWidth и sourceHeight: они определяют прямоугольную область источника, который мы хотим нарисовать на холсте. Так что для первого холста это будет левая треть видео.

targetX, targetY: они определяют координаты, в которых мы хотим нарисовать изображение - всегда 0,0

targetWidth: всегда будет треть видео targetHeight: равен высоте видео

Вот пример:

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>