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

Posted 2023-05-07

【中文标题】如何完美同步两个或多个 html5 视频标签？

【英文标题】：How to perfectly sync two or more html5 video tags?

【发布时间】：2014-01-08 03:25:02

【问题描述】：

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

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

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

我尝试了一些锻炼，包括画布，但我仍然获得视觉差异。有没有人遇到过类似的问题/解决方案？

【问题讨论】：

你有没有发现比答案建议更好的东西？

@fredsbend 我发现绝对没有办法完全做到这一点。过去两年我没有更新，但我怀疑现在有可能。

我担心的事情也与我的经历不谋而合。 :(

【参考方案1】：

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

如果它们需要绝对完美……你同时要解决几个问题：

设备可能不够强大，无法同时获取、同步和渲染 3 个流。

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

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

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

此外，缓冲您在流中获取的几帧（这不用说！）。

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

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

【讨论】：

如果你有同步原语，无论设备的功率如何，你都可以确保同步多个流……如果设备不够强大，它会缓冲/暂停播放器。这是一个已解决的问题。当然你不能在 javascript 中做到这一点......也许在 WebAssembly（尽管缺少 DOM 可能是一个保险杠）或 WebAPI（即 mediaGroup）

您似乎是在暗示，在制作中，将所有三个视频都放入一个尺寸不规则的长方形视频中。然后在 HTML 中，使用 css 剪辑三个视频元素，将它们作为单独的项目显示在页面上。这种方法确实有效（I've done it），但所有浏览器似乎都单独处理每个视频元素，并且会下载视频源三次，即使它是完全相同的文件。也许自从我尝试这个三年以来，情况发生了变化。

这个解决方案对我来说是一个交易破坏者。我在播放、暂停和寻找事件侦听器时选择了与 vid1.currentTime = vid2.currentTime 之类的不太完美的同步。我尝试在间隔检查器中工作，但它只是让视频断断续续，因为它总是在寻找，即使我使用parseInt(vid1.currentTime)，所以它会舍入到偶数秒。我想为下面的视频添加一些时间，但后来我认为这会在各种用户下载速度之间增加更多的不一致。

【参考方案2】：

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

但您仍然可以使用一些媒体框架非常接近：

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

【参考方案3】：

唯一允许命名为mediaGroup 的功能是来自Chrome 的removed（显然是因为不够流行）。它仍然存在于WebKit 中。相关讨论here 和here。

我认为你可以使用wasm 实现你自己的类似“媒体组”的标签，尽管没有 DOM 支持它可能会很棘手。