如何使用JavaScript获取用户上传视频的比特率

云原生阿岚

2026-9-29

问题原因

元数据读取是异步操作，同步读取时视频元数据还未完成加载，无法拿到有效数值
window.URL.revokeObjectURL 调用时机过早，临时URL在元数据加载完成前就被销毁，视频元素无法读取文件信息
原生HTMLVideoElement没有标准的bitrate属性，直接读取该属性得到的是undefined

实现方案

通常业务场景使用平均比特率即可，计算公式为 (文件总字节数 * 8) / 视频时长，得到的结果单位为bps，可根据需要转换为kbps、Mbps等单位。
实现代码如下：

document.getElementById('fileUp').addEventListener('change', function(e) {
  const videoFile = e.target.files[0];
  // 校验文件类型
  if (!videoFile?.type.startsWith('video/')) {
    console.log('请上传合法的视频文件');
    return;
  }
  const videoEle = document.createElement('video');
  videoEle.preload = 'metadata';

  // 元数据加载完成后处理
  videoEle.onloadedmetadata = function() {
    // 计算平均比特率，转kbps单位
    const bitrateKbps = Math.round((videoFile.size * 8) / videoEle.duration / 1000);
    console.log('视频平均比特率：', bitrateKbps, 'kbps');
    // 此处可将bitrateKbps传给后端
    
    // 资源使用完成后再释放临时URL
    window.URL.revokeObjectURL(videoEle.src);
  };

  // 加载失败兜底
  videoEle.onerror = function() {
    console.log('视频元数据加载失败，请检查文件是否损坏');
    window.URL.revokeObjectURL(videoEle.src);
  };

  videoEle.src = URL.createObjectURL(videoFile);
});