HTML5: Separate a 1000x1000 video on four different 250x250 videos - html

Question

Is it possible with HTML5 to separate a rectangular 1000x1000 video on 4 different videos of 500x500 and configure every smaller rectangular differently?

Answer 1

Article: http://techslides.com/split-video-into-html5-canvas-tiles-with-drag-and-drop/
Original source: http://techslides.com/demos/split-video-into-canvas-tiles.html
It's really simple:
<div style="display:none">
<video id="source-vid" autoplay loop="true">
<source src="sample-videos/BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="sample-videos/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
</div>
<div id="box"></div>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
ROWS = 3;
COLS = 4;
tiles(640, 360, ROWS, COLS);
var video = $("#source-vid")[0];
update(video);
function update(video) {
tiles(640, 360, ROWS, COLS, video);
setTimeout(function() { update(video) }, 33);
}
function tiles(w, h, r, c, source) {
var tileW = Math.round(w / c);
var tileH = Math.round(h / r);
for(var ri = 0; ri < r; ri += 1) {
for(var ci = 0; ci < c; ci += 1) {
//if source is not specified, just build canvas object, otherwise draw inside them
if (typeof source === 'undefined') {
var tile = $('<canvas class="tile" id="tile' + ri + ci + '" height="' + tileH + '" width="' + tileW + '"></canvas>').get(0);
$("#box").append(tile);
$(".tile").draggable();
} else {
var getit = $('#tile' + ri + ci).get(0);
context = getit.getContext('2d');
context.drawImage(source, ci*tileW, ri*tileH, tileW, tileH, 0, 0, tileW, tileH);
}
}
}
}
</script>
Let me know if you need a demo without draggable script.