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

Question

有没有办法让两个或更多(最好是三个)html5 标签同时播放并完美同步。

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

很遗憾，我不能使用 MediaController，因为它的支持不够好。

我已经尝试了一些训练，包括 Canvas ，但我仍然能看到视觉差异。有没有人遇到过类似的问题/解决方案？

Answer 1

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

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

1. 设备可能不够强大，无法同时获取、同步和呈现 3 个流。

2. 即使解决了第一个问题，设备也永远不会完全专用于您的任务。例如，它可能会在处理流#1 和流#2 之间暂停垃圾回收——导致帧丢失/不同步。

因此，为了给自己最好的完美机会，您应该首先在演播室(或使用演播室软件)将您的 3 个视频合并为 1 个垂直视频。

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

此外，缓冲您在流中获取的几帧(这是不言而喻的!)。

使用requestAnimationFrame (RAF) 来控制绘图。 RAF 在系统资源可用时绘制帧和在系统资源不足时延迟帧方面做得相当好。

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