同步多个HTML5视频 [英] Synchronizing multiple HTML5 videos

问题描述

我希望有3个视频同步播放，一次只能看到一个可以在它们之间切换的视频。所有这些都必须彼此同步和一个音频轨道（如果更容易，它可以只是其中一个视频文件的音轨）。

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).

我只有阅读关于在众多媒体文件中保持稳定和同步帧速率的非常悲观的事情几乎是不可能的。 FPS据说会略微转移并且无法控制。（？）

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.(?)

因为我一次只需要一个可见的我希望这对我有利但是我想知道是否对于任何人都可以向我指出的那种东西，有任何goto程序。不寻找任何人为我写任何代码，只是好奇我的研究是否误导了我。

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.

&＃x270c; &安培; ♡

✌ & ♡

推荐答案

遗憾的是，浏览器中没有同步机制（即时间码/ SMTPE或类似的sinc）以实现完美同步使用不同的视频资源。

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.

强制 currentTime 由于延迟，更新可能会适得其反。

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.

然后只需使用画布（或使用CSS剪辑）在页面的不同元素中显示视频的不同部分。

Then simply use canvas (or clipping with CSS) to show different parts of the video in different elements in the page.

更新：暂时删除概念证明演示，对不起。答案内容仍然有效。

使用画布元素使用 drawImage（）在当前部分绘制剪辑功能。 OSX中存在一个已知问题，使用视频作为 drawImage（）的图像源;您可以为这些情况预加载图像序列。

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.

您可以为每个部分设置一个地图 - 在本例中我将使用HD720作为总大小：

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>

在JavaScript中：

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)
}

如果你想将所有视频渲染到屏幕同时，但在不同的位置，您可以使用相同的地图调用drawImage（）三次，但使用不同的画布：

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>

在JavaScript中：

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)
}

提示：画布的大小可以与视频部分不同。只需更新最后一个宽度和高度（dest.rect）来填充画布。

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.

提示2：您可以使用此技术同时叠加文本或徽标等。

Tip 2: you can using this technique also superimpose text or logos etc.

这篇关于同步多个HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！