如何在HTML5 Video中访问NTP或其他时间戳及相关元数据

当然存在啦！HTML5常用的视频格式（像MP4、WebM这类）都会在文件内部存储各类时间戳元数据——不仅有播放依赖的PTS（显示时间戳）、DTS（解码时间戳），部分格式还支持嵌入自定义的绝对时间元数据（比如拍摄时间、编码时的NTP时间）。下面我分场景给你讲怎么访问这些数据，以及如何实现和NTP时间戳的同步：

一、前端浏览器环境下访问时间戳 #

浏览器原生API不会直接暴露视频文件内部的原始时间戳，需要借助媒体解析库或者MediaSource API配合解析：

1. 解析播放相关的PTS/DTS时间戳 #

可以用mp4box.js（针对MP4格式）这类专门解析视频容器的库，提取文件内的原始时间戳信息，示例代码如下：

const video = document.getElementById('targetVideo');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 适配MP4的编码格式，根据自己的视频调整
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  // 获取视频文件的ArrayBuffer
  const videoBuffer = await fetch('your-video.mp4').then(res => res.arrayBuffer());
  sourceBuffer.appendBuffer(videoBuffer);

  sourceBuffer.addEventListener('updateend', () => {
    const mp4boxFile = MP4Box.createFile();
    mp4boxFile.onError = console.error;
    mp4boxFile.onReady = (videoInfo) => {
      // 遍历所有音视频轨道，获取时间戳信息
      videoInfo.tracks.forEach(track => {
        console.log(`轨道ID: ${track.id}，时间刻度: ${track.timescale}`);
        console.log(`轨道起始时间戳: ${track.movie_start_time}`);
        // 每个采样帧的PTS/DTS
        track.samples.forEach((sample, index) => {
          console.log(`第${index+1}帧 - PTS: ${sample.cts}, DTS: ${sample.dts}`);
        });
      });
    };
    // 将视频Buffer传入mp4box解析
    mp4boxFile.appendBuffer(new Uint8Array(videoBuffer));
  });
});

2. 获取绝对时间元数据（如拍摄/编码时间） #

如果视频文件嵌入了拍摄时间、编码时的NTP时间这类元数据，可通过解析MP4的meta原子或者借助exifr库读取，示例：

import exifr from 'exifr';

const videoFile = document.getElementById('videoInput').files[0];
const metadata = await exifr.parse(videoFile);
console.log('视频拍摄时间:', metadata.CreateDate);
// 如果有自定义嵌入的NTP时间，可从metadata的对应字段读取

二、后端/本地环境下访问时间戳 #

如果是在后端处理视频文件，用FFmpeg这类工具会更高效：

• 查看视频轨道的PTS/DTS信息：

ffmpeg -i your-video.mp4 -show_entries stream=pts_time,dts_time -of compact=p=0:nk=1

• 提取视频的元时间数据（如拍摄时间）：

exiftool your-video.mp4 | grep "DateTime"

三、与NTP时间戳同步的实现思路 #

要实现视频和NTP时间戳的同步，核心是建立视频内部相对时间和绝对NTP时间的映射关系：

1. 预嵌入基准时间：在视频生成阶段，将编码起始时刻的NTP时间写入视频的自定义元数据字段（比如MP4的udta原子）。
2. 播放时计算绝对时间：前端读取视频的基准NTP时间，结合视频当前的播放相对时间（video.currentTime），计算出当前帧对应的绝对NTP时间：

// 假设从视频元数据中读取到的起始NTP时间（单位：毫秒）
const videoStartNtpMs = 1699999999000;
video.addEventListener('timeupdate', () => {
  const currentRelativeMs = video.currentTime * 1000;
  const currentNtpTime = videoStartNtpMs + currentRelativeMs;
  // 这里可以和实时获取的NTP时间对比，做微小校准
  console.log('当前帧对应的NTP时间:', currentNtpTime);
});

3. 校准同步误差：如果视频存在播放偏移，可以通过对比实时NTP时间和计算出的当前帧NTP时间，调整视频的播放速率或跳转，实现精准同步。

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