javascript - Html5 视频帧准确

Question

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

有人对此有提示吗？
非常感谢!

Answer 1

问题

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

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

此外，由于基于整数的转换以及视频中的起始位置，可能存在舍入误差。根据浏览器的不同，也有不同的视频解码解决方案，例如，Chrome 在底层使用 FFMpeg，Firefox 使用 OS* 中可用的任何内容(对于 MP4 编码的视频)等等。

可能的解决方案

(更新:忘了说-)有 Media Source Extensions API 支持VideoPlaybackQuality object .目前 [Chrome 和 IE(在 Windows 8+ 上)以及 Firefox 都支持此功能。

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

var q = video.getVideoPlaybackQuality();

然后使用它的属性读出值:

var frames = q.totalVideoFrames;

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

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

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