Question

I'm trying to get an html5 video tag source element to return an accurate frame number.
Something near that stackoverflow answers.
My goal here is to display an accurate timecode. I've been looking at VideoFrame and many others, but none of them are accurate. If you play a video containing burned-in timecode or frame count, like the one I'm using video_keyframes12_24p_Mbits1.8.mp4 That I've made myself. You will eventually see one frame off.

Dose anyone has a hint on this ?
Many many thank !

Answer 1

问题

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

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

此外，由于基于整数的转换可能存在舍入误差，并且可能还取决于视频中的起始位置。根据broswer的不同，视频在视频下的解码方式也有不同的解决方案，例如，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。

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

在思科免费发布mp4解决方案后，

^*） 可能在最新版本中发生了变化。

Answer 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。

Html5 Video frame accurate

2 个答案:

问题

可能的解决方案