js 获取视频帧PTS

Question

最近在做一个视频对比工具，具体是使用video标签拉取两个flv文件来展示对比，两个视频流需要做帧对齐，因为加载是异步的，所以得到的视频流并不能保持在同一帧开始播放，所以要做帧对齐，目前想到的办法是利用js获取视频帧pts对比两个视频流的时间差，再调整进度，请问要怎么用js获取视频帧的pts？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在JavaScript中，获取视频帧的PTS（Presentation Time Stamp）不是直接通过HTML Video元素API支持的，因为HTML5视频标签并没有提供直接访问视频帧PTS的接口。然而，你可以通过解析视频文件本身来获取这些信息，这需要用到专门的库或者工具来处理视频流数据。对于FLV格式的视频文件，你可能需要使用一些专门处理FLV文件的库来解析和获取帧的时间戳信息。

对于你的需求，实现帧对齐，你可以尝试以下步骤：

1. 使用合适的库（如flv.js或者其他能够解析FLV文件的库）来解析FLV文件并获取每一帧的时间戳（PTS）。
2. 在两个视频流加载完成后，对比两个视频流的帧时间戳，计算它们之间的时间差。
3. 根据时间差调整一个视频流的播放进度，使得两个视频流的播放帧对齐。

由于直接获取视频帧PTS在JavaScript中不可行，你可能需要采取其他策略来实现帧对齐。例如：

• 利用视频的元数据（例如在视频的头部信息中通常包含时间戳信息），但这需要你有能力解析视频文件的元数据。
• 通过比较两个视频播放到某一特定时间点时的播放位置来实现同步。例如，你可以让两个视频都播放到第N秒，然后比较它们在这个时间点播放到的帧是否对齐。通过这种方式逐渐调整视频的播放进度，直至找到对齐的帧。这种方法可能比较复杂且需要精确的同步控制。

关于你提供的图1和图2内容，看起来像是关于视频处理的某种流程图或说明，但并未提供足够的信息来确定它们与你的问题之间的直接关系。如果这些图表中包含有关视频帧PTS的信息或处理方法，你可能需要根据这些信息进行适当的调整和处理。不过由于你没有提供更多细节，无法确定它们是否与你的需求有关。如果你能提供更多的背景信息或上下文，我可能能够提供更具体的帮助。