There is unfortunately no sync mechanism in the browser (i.e. time-code/SMTPE or similar sinc) to allow perfect synchronization with different video sources.
Forcing currentTime updates can backfire due to the lag.
To properly sync the video parts all video must come from the same video source (the file in this case). The video can be pre-edited so that all the parts you want to show are edited together sharing the video image surface.
Then simply use canvas (or clipping with CSS) to show different parts of the video in different elements in the page.
Update: proof-of-concept demos removed for now, sorry. Content of answer still valid though.
Use a canvas element to draw in the "current" part using drawImage() clipping functionality. There is a known issue in OSX using video as image source for drawImage(); you could pre-load an image sequence for these cases.
You could set up a map for each part - in this example I will use HD720 as total size:
var map = [
{x: 0, y:0},
{x: 640, y:0},
{x: 0, y:360}
];
Now you can use buttons/selector/radios to change index of which video to show. The width and height is known:
<canvas width=640 height=360></canvas>
And in JavaScript:
var pos = map[index]; // source rect: Dest rect:
ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
All you need to do now is to put the drawing into a loop:
function render() {
var pos = map[index];
ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
requestAnimationFrame(render)
}
If you want to render all videos to the screen at the same time, but to different locations, you can instead just call drawImage() three times using the same map, but with different canvases:
<div>
<canvas width="640" height="360"></canvas>
</div>
<div style="margin-left:400px">
<canvas width="640" height="360"></canvas>
</div>
<div>
<canvas width="640" height="360"></canvas>
</div>
And in JavaScript:
function render() {
for(var i = 0, pos; i < ctx.length; i++) {
pos = map[i];
ctx[i].drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
}
requestAnimationFrame(render)
}
Tip: the canvas can be of a different size than the video part. Just update the last width and height (dest. rect) to fill the canvas.
Tip 2: you can using this technique also superimpose text or logos etc.
