How to perfectly sync two or more html5 video tags?

Question

Is there any way to have two or more (preferably three) html5 < video > tags playing simultaneously and to be in perfect sync.

If I have let's say three tiles of one video and I want them to appear in browser as one big video. They need to be perfectly synchronized. Without even smallest visual/vertical hint that they are tiled.

Unfortunately I cannot use MediaController because it is not supported well enough.

I've tried some workouts, including canvases, but I still get visual differentiation. Has anyone had any similar problem/solution?

Answer 1

Disclaimer: I'm not a video guy, but here are some thoughts anyway.

If they need to be absolutely perfect...you are fighting several problems at once:

1. A device might not be powerful enough to acquire, synchronize and render 3 streams at once.

2. Even if #1 is solved, a device is never totally dedicated to your task. For example, it might pause for garbage collection between processing stream#1 and stream#2--resulting in dropped/unsynchronized frames.

So to give yourself the best chance at perfection, you should first merge your 3 videos into 1 vertical video in the studio (or using studio software).

Then you can use the extended clipping properties of canvas context.drawImage to break each single frame into 2-3 separate frames.

Additionally, buffer a few frames you acquire on the stream (this goes without saying!).

Use requestAnimationFrame (RAF) to control the drawing. RAF does a fairly good job of drawing frames when system resources are available and delaying frames when system resources are lacking.

Your result won't be perfect, but they will be synchronized. You will always have to make the decision whether to drop or delay frames when system resources are unavailable, but at least the frames you do present will be synchronized.