如何用JavaScript识别HTML文件输入框上传视频的分辨率？

实现方案 #

1. HTML 结构 #

先创建一个文件输入控件，限制仅接受视频类型文件：

<input type="file" id="videoInput" accept="video/*">
<p id="resolutionDisplay"></p>

2. JavaScript 核心逻辑 #

通过监听文件选择事件，利用视频元素加载元数据来获取分辨率：

const videoInput = document.getElementById('videoInput');
const displayElement = document.getElementById('resolutionDisplay');

videoInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 创建隐藏的video元素用于读取元数据
  const video = document.createElement('video');
  video.preload = 'metadata';

  // 元数据加载完成后读取分辨率
  video.addEventListener('loadedmetadata', () => {
    const width = video.videoWidth;
    const height = video.videoHeight;
    const maxSide = Math.max(width, height);
    let resolutionLabel;

    // 根据最大边长匹配通用分辨率等级
    if (maxSide <= 640) {
      resolutionLabel = '360p';
    } else if (maxSide <= 1280) {
      resolutionLabel = '720p';
    } else if (maxSide <= 1920) {
      resolutionLabel = '1080p';
    } else if (maxSide <= 3840) {
      resolutionLabel = '2K';
    } else {
      resolutionLabel = '4K';
    }

    displayElement.textContent = `分辨率：${width}×${height}（${resolutionLabel}）`;

    // 释放文件URL，避免内存泄漏
    URL.revokeObjectURL(video.src);
  });

  // 将选中的视频文件绑定到video元素
  video.src = URL.createObjectURL(selectedFile);
});

关键细节说明 #

• loadedmetadata 事件：必须等待此事件触发后，才能获取视频的真实宽高——因为视频元数据（包括分辨率）需要加载完成才能读取。
• videoWidth/videoHeight：这两个属性返回视频的原始像素尺寸，不受页面上video元素显示大小的影响。
• 分辨率判断规则：这里以视频的最大边长为判断依据，适配横屏/竖屏视频。如果需要以垂直分辨率（传统的“p”值，如720p指垂直高度720）为准，可以把判断逻辑改成基于最小边长。
• 内存清理：使用 URL.revokeObjectURL() 释放临时创建的文件URL，防止浏览器内存占用过高。

注意事项 #

• 确保上传的视频格式（如MP4、WebM）被当前浏览器支持，否则可能无法加载元数据。
• 大文件的元数据加载可能有延迟，可添加加载状态提示优化用户体验。

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