同步多个 HTML5 个视频

Question

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

我只读过一些关于在大量媒体文件中保持稳定和同步的帧率几乎是不可能的事情。 FPS 据说会轻微偏移并且无法控制。(?)

因为我一次只需要一个可见的，所以我希望这对我有利，但我想知道是否有任何人可以向我指出的那种事情的任何转到过程。不找任何人为我写任何代码，只是好奇我的研究是否误导了我。

✌ & ♡

Answer 1

不幸的是，浏览器中没有同步机制（即 time-code/SMTPE 或类似的 sinc）以允许与不同的视频源完美同步。

强制 currentTime 更新可能会因延迟而适得其反。

要正确同步视频部分，所有视频必须来自同一视频源（在本例中为文件）。视频可以预剪辑，让你想展示的所有部分剪辑在一起，共享视频画面。

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

更新：抱歉，暂时删除了概念验证演示。答案的内容仍然有效。

使用 canvas 元素使用 drawImage() 裁剪功能在 "current" 部分中绘制。 OSX 使用视频作为 drawImage() 的图像源存在一个已知问题；您可以为这些情况预加载图像序列。

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

var map = [
        {x: 0, y:0},
        {x: 640, y:0},
        {x: 0, y:360}
    ];

现在您可以使用 buttons/selector/radios 更改要显示的视频的索引。已知宽高：

<canvas width=640 height=360></canvas>

并且在 JavaScript 中：

var pos = map[index]; // source rect:         Dest rect:
ctx.drawImage(video, pos.x, pos.y, 640, 360,  0, 0, 640, 360);

您现在需要做的就是将绘图放入循环中：

function render() {
    var pos = map[index];
    ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
    requestAnimationFrame(render)
}

如果您想同时将所有视频渲染到屏幕上，但渲染到不同的位置，您可以使用同一张地图调用 drawImage() 三次，但使用不同的 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 中：

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

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

技巧2：您还可以使用此技术叠加文字或徽标等

同步多个 HTML5 个视频

Synchronizing multiple HTML5 videos

javascript

html

video

html5-video

popcornjs