Html5 视频帧准确

Question

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

有人对此有暗示吗？
多多谢！

Answer 1

问题

不幸的是，没有可供我们使用的帧 API - Firefox 有一些实验性功能，但除此之外我们只能处理时间以及浏览器如何处理帧解码以及帧速率转换。 请参阅下面的更新。

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

此外，由于基于整数的转换，并且还可能取决于视频中的开始位置，因此可能存在舍入错误。 对于如何在引擎盖下解码视频，也有不同的解决方案，具体取决于浏览器，例如，Chrome 在底层使用 FFMpeg，Firefox 使用 OS* 中可用的任何内容（用于 MP4 编码视频）等等。

可能的解决方案

（更新：忘记提及 -）有支持VideoPlaybackQuality对象的媒体源扩展 API 。 目前[支持 Chrome 和 IE（在 Windows 8+ 上）以及 Firefox。

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

var q = video.getVideoPlaybackQuality();

然后使用其属性读出值：

var frames = q.totalVideoFrames;

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

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

^*)在 Cisco 免费发布其 mp4 解决方案后，最近的版本可能已更改。

Answer 2

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

从 M83 开始，Chromium 有一个 requestVideoFrameCallback() API，它可能会解决您的问题。 您可以使用 mediaTime 获得一致的时间戳，如此 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 的高级概述感兴趣，请参阅博客文章，或者您可以查看API 的官方 github 。