Question

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

我只读过非常悲观的事情，关于在众多媒体文件中保持稳定和同步的帧速率几乎是不可能的。据推测，FPS略有变化，无法控制。（？）

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

✌＆amp; ♡

Answer 1

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

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

要正确同步视频部分，所有视频必须来自同一视频源（本例中为文件）。可以对视频进行预编辑，以便将要显示的所有部分一起编辑，共享视频图像表面。

然后简单地使用canvas（或使用CSS剪辑）在页面的不同元素中显示视频的不同部分。

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

使用canvas元素使用drawImage()剪切功能在“当前”部分中绘制。 OSX中存在使用视频作为drawImage()的图像源的已知问题;您可以为这些情况预加载图像序列。

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

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

现在您可以使用按钮/选择器/无线电来更改要显示的视频的索引。宽度和高度是已知的：

<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（）三次，但使用不同的画布：

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

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

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

同步多个HTML5视频

1 个答案: