如何在Firefox浏览器中高效获取视频时长？

针对Firefox中preload=metadata会加载大量视频数据导致时长获取延迟的问题，这里提供几个实用的解决思路：

1. 服务端预解析视频时长（最优方案） #

如果项目有后端支持，最可靠的方式是在服务端提前批量解析所有视频的时长，将结果存储到数据库或配置文件中，前端直接从接口获取时长数据：

• 服务端可借助FFmpeg（命令示例：ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 [视频路径]）、MediaInfo等工具快速提取时长，无需加载完整视频文件。
• 前端页面渲染时直接展示预存的时长，完全避免客户端加载视频元数据的性能问题。

2. 客户端用Range请求+元数据解析库 #

如果只能在客户端处理，可以通过Fetch API仅请求视频文件的部分数据，再用专门的库解析出时长：

• 发送带Range: bytes=0-8192的请求，获取视频文件的前8KB数据（多数视频的元数据会包含在开头部分）。
• 使用mediainfo.js这类轻量库解析获取到的二进制数据，提取时长信息。这种方式只会下载极小部分数据，在Firefox中也能快速得到结果。
• 核心代码示例：

async function getVideoDuration(url) {
  const response = await fetch(url, {
    headers: { 'Range': 'bytes=0-8192' }
  });
  const buffer = await response.arrayBuffer();
  // 用mediainfo.js解析二进制数据获取时长
  const mediaInfo = await MediaInfo({ format: 'JSON' });
  await mediaInfo.analyzeData(buffer);
  const result = JSON.parse(mediaInfo.result);
  return result.media.track[0].Duration;
}

3. 优化video元素的加载逻辑 #

如果必须使用video元素，可以在获取到时长后立即终止不必要的加载：

• 动态创建video元素，监听loadedmetadata事件，一旦触发就记录时长，然后立即暂停加载并清空资源：

function getDurationViaVideo(url) {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
    video.src = url;
    
    video.addEventListener('loadedmetadata', () => {
      resolve(video.duration);
      // 终止后续数据下载，减少带宽消耗
      video.pause();
      video.src = '';
      video.load();
    });
  });
}

• 批量处理时可限制并发数量（比如一次只处理3-5个视频），避免阻塞页面渲染。

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