Synchronizing multiple HTML5 videos

问题

I'm hoping to have 3 videos playing in sync, only one visible at a time with the option to toggle between them. All must be in sync with each other and an audio track (which can just be the audio track of one of the video files if that is easier).

I have only read very pessimistic things about keeping a steady and synchronized frame rate across numerous media files is near impossible. The FPS supposedly shifts slightly and is uncontrollable.(?)

Since I only need one visible at a time I am hoping that will be in my favor but I am wondering if there are any goto procedures for something of the sort that anyone can point out to me. Not looking for anyone to write any code for me, just curious if my research has been misleading me.

✌ & ♡

回答1:

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.

来源：https://stackoverflow.com/questions/36374924/synchronizing-multiple-html5-videos

标签

javascript

html5

video

html5-video

popcornjs