如何获取HTML媒体音视频元素的精确剩余播放时长？

你遇到的尾差本质是两个原因导致的：

1. JavaScript 中所有数字均以双精度浮点数存储，duration 和 currentTime 两个小数做减法时天然会存在浮点数精度舍入问题，也就是你看到的 x.999999 或者 x.99998 后缀
2. 浏览器底层的媒体时间戳是和音视频采样率、帧速率对齐的，上报的 currentTime 本身就存在微秒级的舍入偏移

修复方案 #

1. 保留微秒级精度的处理方法 #

直接对计算结果做微秒级取整即可消除尾差，误差会控制在1微秒以内，完全符合精度要求：

const getRemainingTime = (mediaElement) => {
  if (isNaN(mediaElement.duration)) return 0;
  return Math.round((mediaElement.duration - mediaElement.currentTime) * 1e6) / 1e6;
};

2. 常规业务使用（毫秒级精度） #

如果场景不需要到微秒级，只需要保留到毫秒，用毫秒级取整即可，性能更好也更常用：

const getRemainingTimeMs = (mediaElement) => {
  if (isNaN(mediaElement.duration)) return 0;
  return Math.round((mediaElement.duration - mediaElement.currentTime) * 1e3) / 1e3;
};

额外注意事项 #

• 计算前请确保媒体元数据已经加载完成，最好在 loadedmetadata 事件触发后再调用计算逻辑，避免拿到的 duration 为 NaN
• 如果需要做播放结束判定，不要直接判断剩余时长等于0，建议增加微秒级容限：remainingTime < 1e-6，可以完全规避精度问题导致的判定失效
• 浏览器提供的媒体时间本身的最小精度和媒体帧率对齐，比如24帧视频的单帧时长约为41.67ms，实际不存在绝对的亚毫秒级时间精度，你观察到的微秒级误差仅为浮点数存储导致的显示异常，不影响实际业务逻辑

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