html5显示视频帧,javascript – Html5视频帧准确

问题

不幸的是,我们没有使用框架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解决方案后,最新版本可能已经发生变化.