HTML5 Video：如何匹配播放帧与已处理的VideoFrame？

核心问题分析 #

你遇到的时间戳不匹配，本质是WebCodecs返回的原始时间戳和HTML视频元素使用的媒体时间基准不一致，再加上视频容器可能存在的时间偏移、PTS/DTS差异导致的。以下是直接可用的解决方法：

1. 修正时间基准偏移 #

视频轨道的timescale（时间刻度）和baseMediaDecodeTime（起始解码时间）是核心差异来源，需要将WebCodecs的微秒时间戳转换为和HTML视频mediaTime一致的基准：

// 示例：用视频解析工具获取轨道信息
const track = videoParser.getTrackById(videoTrackId);
const timescale = track.timescale;
const baseTimeOffset = track.baseMediaDecodeTime / timescale; // 轨道起始时间偏移（秒）

// 预处理每帧时转换时间戳
processedFrames.forEach(frame => {
  // 将WebCodecs的微秒timestamp转为媒体时间（秒），并减去轨道偏移
  frame.convertedStartTime = (frame.timestamp / 1000000) - baseTimeOffset;
  frame.convertedEndTime = frame.convertedStartTime + (frame.duration / 1000000);
});

第一帧timestamp>0但视频在mediaTime=0显示的问题，就是轨道起始偏移导致的，减去偏移后即可对齐。

2. 用二分查找高效匹配播放帧 #

可变帧率下不要用遍历，改用二分查找匹配requestVideoFrameCallback返回的mediaTime，避免边界误差：

// 预处理时生成帧时间映射表
const frameTimeMap = processedFrames.map((frame, index) => ({
  startTime: frame.convertedStartTime,
  endTime: frame.convertedEndTime,
  frameIndex: index
}));

// 监听视频帧渲染
function matchRenderedFrame(metadata) {
  const currentMediaTime = metadata.mediaTime;
  let left = 0, right = frameTimeMap.length - 1;
  let matchedIndex = 0;

  // 二分查找匹配当前时间对应的帧
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    const currentFrame = frameTimeMap[mid];
    if (currentMediaTime >= currentFrame.startTime && currentMediaTime < currentFrame.endTime) {
      matchedIndex = currentFrame.frameIndex;
      break;
    } else if (currentMediaTime < currentFrame.startTime) {
      right = mid - 1;
    } else {
      left = mid + 1;
    }
  }

  // 处理匹配到的帧
  handleProcessedFrame(processedFrames[matchedIndex]);
  // 持续监听
  videoElement.requestVideoFrameCallback(matchRenderedFrame);
}

// 启动监听
videoElement.requestVideoFrameCallback(matchRenderedFrame);

3. 切换到显示时间戳（DTS）匹配 #

部分视频中WebCodecs返回的是编码时间戳（PTS），但HTML视频用显示时间戳（DTS）渲染，此时需要用视频解析工具获取每帧的DTS：

// 示例：用解析工具获取帧的DTS
videoParser.onSamples = (trackId, samples) => {
  samples.forEach((sample, index) => {
    // 将DTS转换为对齐后的媒体时间
    const dtsTime = (sample.dts / track.timescale) - baseTimeOffset;
    frameTimeMap[index].startTime = dtsTime;
    frameTimeMap[index].endTime = dtsTime + (sample.duration / track.timescale);
  });
};

4. 应急校准第一帧 #

如果无法获取轨道信息，可强制将第一帧的起始时间设为0，统一调整后续帧的时间戳：

const firstFrameStartTime = frameTimeMap[0].startTime;
frameTimeMap.forEach(frame => {
  frame.startTime -= firstFrameStartTime;
  frame.endTime -= firstFrameStartTime;
});

内容的提问来源于stack exchange，提问作者KarelPrdel