Html5视频帧准确答案

【问题标题】：Html5 Video frame accurateHtml5视频帧准确
【发布时间】：2020-05-20 02:07:59
【问题描述】：

我正在尝试获取 html5 视频标记源元素以返回准确的帧号。
stackoverflow answers附近的东西。
我的目标是显示准确的时间码。我一直在查看VideoFrame 和许多其他人，但没有一个是准确的。如果您播放包含刻录时间码或帧数的视频，例如我正在使用的 video_keyframes12_24p_Mbits1.8.mp4 我自己制作的视频。你最终会看到一帧关闭。

有人对此有提示吗？
许多许多感谢！

【问题讨论】：

标签： javascript html5-video

【解决方案1】：

问题

~~很遗憾没有可供我们使用的帧 API - Firefox has some experimental features，但除此之外我们只能处理时间以及浏览器如何处理帧解码以及帧速率转换。~~ 请参阅下面是更新。

例如，浏览器可能会或可能始终转换/标准化为 30 fps，如果是这样，可能会或可能不会假设丢帧（对于 29.97/59.94 fps/NTSC）。随着时间的推移，这将影响帧数并最终显示为偏移量，因为时间和帧数之间没有真正的联系。

此外，由于基于整数的转换可能会出现舍入误差，并且还可能取决于视频中的开始位置。根据浏览器的不同，对于如何在后台解码视频也有不同的解决方案，例如，Chrome 在底层使用 FFMpeg，Firefox 使用 OS* 中可用的任何内容（用于 MP4 编码视频）等等。

可能的解决方案

（更新：忘了提-）有支持VideoPlaybackQuality object的Media Source Extensions API。这目前 [在 Chrome 和 IE（在 Windows 8+ 上）以及 Firefox 中得到支持。

要使用你可以直接在 HTMLVideoElement 上调用它：

var q = video.getVideoPlaybackQuality();

然后使用其属性读出值：

var frames = q.totalVideoFrames;

请注意，无论实际播放位置如何，此值都可能会累积所有帧。您也许可以直接使用 MSE 解决这个问题。设置和处理有点繁琐，但this link 提供了一个很好的起点，以防您不熟悉 MSE。

另一种想法是在视频中编码一个特殊的条形码，然后使用画布读取它。它在实际的 SMPTE 时间码上是等效的，但这需要在某种程度上在视频中可见叠加层（将电视文本编码到视频的过扫描区域的旧方法）。如果视频是全帧的，则会出现其他问题，例如根据用于编码的颜色进行错误检测（或为其制作纯色背景）。

^*)在思科免费发布他们的 mp4 解决方案后，最近的版本可能发生了变化。

【讨论】：

【解决方案2】：

我在您引用的链接上发布了这个答案，但我认为它在这里也可能相关：

从 M83 开始，Chromium 有一个 requestVideoFrameCallback() API，它可能会解决您的问题。您可以使用 mediaTime 来获得一致的时间戳，如this Github issue 中所述。从那里，你可以尝试这样的事情：

var frameCounter = (time, metadata) => {
   let count = metadata.mediaTime * frameRate;
   console.log("Got frame: " + Math.round(count));

   // Display timecode code here.

   video.requestVideoFrameCallback(frameCounter);
}

video.requestVideoFrameCallback(frameCounter)

这只会在新帧上触发，但您可能偶尔会错过一个（您可以从metadata.presentedFrames 计数中的不连续性中检测到）。您也可能在捕获帧时稍晚（通常为 16 毫秒，或者比视频帧可用时更晚调用window.requestAnimationFrame()）。

如果您对 API 的高级概述感兴趣，here's a blogpost，或者您可以查看API's offical github。

【讨论】：

我的博文还有后续article。