媒体采集性能监测：利用 Performance API 跟踪音视频流中断时间-H5教程-PHP中文网

Performance API 不能直接采集音视频流中断时间，需结合播放器事件（如waiting、playing）用performance.mark()/measure()手动标记并测量中断时段，辅以缓冲、就绪状态等业务逻辑判断，并过滤噪音后聚合上报。

媒体采集性能监测：利用 performance api 跟踪音视频流中断时间

Performance API 本身不直接支持音视频流中断时间的采集。它提供的是页面级性能指标（如导航、资源加载、绘制等），而流媒体中断属于播放器行为或网络/解码异常，需结合播放器事件、媒体API和自定义打点逻辑来实现。

关键点在于：中断不是 Performance API 的原生指标，必须靠组合判断

PerformanceObserver 可监听 navigation、resource、paint 等类型，但没有 media-interruption 或 buffer-stall 类型；
流中断的真实信号来自播放器自身：如 waiting、stalled、suspend、error 事件，以及 video.buffered、video.readyState、video.playbackRate 的变化；
performance.mark() 和 performance.measure() 可用于手动标记中断开始与恢复的时间点，但起止判定依赖业务逻辑。

如何用 Performance API 辅助监测中断时间

在监听到播放器进入卡顿状态时打标记

video.addEventListener('waiting', () => {
  performance.mark('interrupt-start');
});

在检测到播放恢复时再打标记并测量

Moshi Chat

Moshi Chat是一款由 Kyutai 推出的实时语音对话 AI 模型与聊天演示。

下载

video.addEventListener('playing', () => {
  performance.mark('interrupt-end');
  performance.measure('buffer-interruption', 'interrupt-start', 'interrupt-end');
});

注意避免重复标记：同一中断周期内只应触发一次 interrupt-start，可用标志位控制

let isInterrupting = false;
video.addEventListener('waiting', () => {
  if (!isInterrupting) {
    performance.mark('interrupt-start');
    isInterrupting = true;
  }
});
video.addEventListener('playing', () => {
  if (isInterrupting) {
    performance.mark('interrupt-end');
    performance.measure('buffer-interruption', 'interrupt-start', 'interrupt-end');
    isInterrupting = false;
  }
});

更可靠的中断判定依据（推荐配合使用）

video.seeking 为 true 且 video.paused 为 true → 可能是 seek 导致的短暂中断，非真实卡顿
video.buffered.end(0) → 缓冲不足，大概率即将中断
video.readyState 且 video.networkState === 2 → 网络加载中，已发生或即将发生中断
video.duration === Infinity（如直播）时，需额外监控 video.stalled 事件或 timeupdate 停滞

上报与聚合建议

使用 performance.getEntriesByName('buffer-interruption') 获取所有中断记录
过滤掉极短（如
按会话聚合：统计单次播放中总中断时长、最大单次中断、中断次数
结合 Media Edge API 上报时，可将中断数据作为 mediaCollection.sessionDetails.interruptionCount 和 interruptionDurationTotal 字段嵌入 XDM

中断监测本质是播放器状态 + 时间标记 + 业务规则的组合，Performance API 是计时工具，不是检测源头。