如何完美同步两个或更多html5视频标签？

Question

有没有办法让两个或更多（最好是三个）html5 ＆lt;视频＆gt; 标签同时播放并完美同步。

如果我让我们说一个视频的三个图块，我希望它们作为一个大视频出现在浏览器中。他们需要 完美 同步。没有最小的视觉/垂直暗示它们是平铺的。

不幸的是我无法使用MediaController，因为它支持得不够好。

我尝试了一些训练，包括画布，但我仍然有视觉差异。有没有人有任何类似的问题/解决方案？

Answer 1

免责声明：我不是视频人，但无论如何这里有一些想法。

如果他们需要绝对完美......你会同时解决几个问题：

1. 设备可能不够强大，无法一次获取，同步和渲染3个流。

2. 即使＃1已解决，设备也永远不会完全专注于您的任务。例如，它可能暂停处理流＃1和流＃2之间的垃圾收集 - 导致丢弃/不同步的帧。

因此，为了给自己提供完美的最佳机会，您应首先将3个视频合并到工作室中的1个垂直视频中（或使用工作室软件）。

然后，您可以使用canvas context.drawImage的扩展剪切属性将每个帧分成2-3个独立的帧。

此外，缓冲你在流上获得的几帧（这不用说！）。

使用requestAnimationFrame（RAF）来控制绘图。当系统资源可用时，RAF可以很好地绘制帧，并在缺少系统资源时延迟帧。

您的结果不会很完美，但它们会同步。当系统资源不可用时，您将始终决定是否丢弃或延迟帧，但至少会同步您所呈现的帧。

Answer 2

据我所知，目前无法逐帧播放HTML5视频，或寻求帧准确的时间码。最接近的搜索似乎精确到大约1秒。

但是你仍然可以使用一些媒体框架：

1. Popcorn.js用于同步视频和内容的库。
2. mediagroup.js另一个用于在HTML5媒体元素上添加对媒体组属性的支持的库

Answer 3

唯一允许使用此功能的功能名为mediaGroup，来自Chrome的removed（显然不够受欢迎）。它仍然出现在WebKit中。相关讨论here和here。

我认为您可以使用wasm实现自己的“类似媒体组”标记，但如果没有DOM支持，它可能会很棘手。