同步多个HTML5视频

Question

同步多个HTML5视频

javascripthtmlvideohtml5-videopopcornjs

6

我希望能够同时播放3个视频，每次只能看到一个，并且可以在它们之间切换。所有视频和音频轨道必须保持同步（如果只需要一个视频的音轨，也可以这样做）。

我只需要一次显示一个视频，因此希望这对我有利，但我想知道是否有任何适用于此类问题的常规程序，希望任何人都能指点我。不需要任何人为我编写代码，只是好奇我的研究是否误导了我。

✌ & ♡

- Tomelower

也许这个对你有帮助？http://popcornjs.org/Popcorn的示例用法：http://www.rebelliouspixels.com/semanticremix/ - iSidle

1

有没有PopcornJS的特定用途可以帮助保持视频同步？我已经阅读了文档，但没有发现任何有用的信息，因为这些都可以在普通的JavaScript中轻松完成。 - Tomelower

为什么需要让它们都播放？如果只有一个视频需要显示，您可以获取视频的时间并在同一时间开始另一个视频。同时还可以在后台播放单独的音轨。此外，您可以使用http://popcornjs.org/popcorn-docs/media-properties/#framerate控制帧速率。 - iSidle

所选答案确实有效，但浏览器会为每个视频元素下载源文件，即使它们指向同一个源文件。 https://dev59.com/uYXca4cB1Zd3GeqPLqpg 也许在三年内有所改变。 - user1934286

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

很遗憾，浏览器中没有同步机制（即时间码/SMTPE或类似的同步），无法与不同的视频源完美同步。由于滞后，强制更新currentTime可能会产生反效果。为了正确同步视频部分，所有视频都必须来自同一视频源（在这种情况下是文件）。可以预先编辑视频，使要显示的所有部分都共享视频图像表面并进行编辑。然后，只需使用画布（或使用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)
}

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

提示2：您还可以使用这种技术叠加文本或标志等。