如何不通过DOM操作获取视频文件的宽度和高度尺寸

可以实现和图片类似的、无需插入DOM渲染即可获取原始宽高的效果，核心是利用视频元数据加载的事件回调，逻辑和你用Image对象获取图片尺寸的思路一致：全程在内存中处理，仅加载必要的元数据，不触发页面渲染。

完整实现代码 #

const getVideoDimensions = (videoUrl) => {
  return new Promise((resolve, reject) => {
    // 在内存中创建video元素，无需append到DOM树
    const video = document.createElement('video');
    // 仅预加载元数据，避免下载完整视频，降低性能开销
    video.preload = 'metadata';
    video.src = videoUrl;

    // 元数据加载完成后触发，此时已获取到视频原始宽高
    video.addEventListener('loadedmetadata', () => {
      const result = {
        width: video.videoWidth,
        height: video.videoHeight
      };
      // 清理内存资源
      video.remove();
      resolve(result);
    });

    // 处理加载异常
    video.addEventListener('error', (error) => {
      video.remove();
      reject(new Error(`视频元数据加载失败: ${error.message}`));
    });
  });
}

// 调用示例
getVideoDimensions('example-video.mp4')
  .then(dimensions => {
    console.log('视频原始宽高：', dimensions.width, dimensions.height);
  })
  .catch(err => {
    console.error(err);
  });

关键注意事项 #

• 必须读取video.videoWidth和video.videoHeight属性，而非元素自带的width/height属性：前者是视频本身的原始分辨率，后者是元素在页面中的展示尺寸，默认值不代表视频真实参数
• 跨域视频需要资源服务器配置正确的CORS响应头，否则会触发加载错误，规则和跨域图片的处理逻辑一致
• 回调执行后主动调用video.remove()可以避免残留未完成的资源请求，减少内存占用

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