如何从拖拽的DataTransfer.files中获取视频元数据且不载入内存

首先，你已经搭好了拖拽功能的基础框架，针对你要只处理视频、且不加载大文件到内存的需求，我们可以通过文件切片 + 浏览器原生媒体解析能力来实现——只读取视频文件的头部片段就能提取核心元数据，完全不用加载整个文件。下面是基于你现有代码的优化版本：

let targDrop = document.querySelector(`[data-drop="simb1"]`);
targDrop.addEventListener("dragover", function(e){
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect='copy';
});
targDrop.addEventListener("drop", drop);

function drop(e){
  e.preventDefault();
  e.stopPropagation();
  let file = e.dataTransfer.files[0];

  // 第一步：快速过滤出视频文件
  if (!file.type.startsWith('video/')) {
    console.log("请拖拽视频类型的文件哦");
    return;
  }

  // 第二步：仅截取文件头部1MB片段（主流视频格式的元数据都存放在这里）
  // slice方法不会把文件读入内存，只是创建原文件指定范围的引用
  const fileSlice = file.slice(0, 1024 * 1024);

  // 第三步：用临时URL让视频元素加载这段切片，解析元数据
  const tempUrl = URL.createObjectURL(fileSlice);
  const video = document.createElement('video');

  // 元数据加载完成时触发的事件
  video.addEventListener('loadedmetadata', function() {
    // 这里就能拿到你需要的视频元数据了！
    console.log("视频时长：", video.duration, "秒");
    console.log("视频分辨率：", `${video.videoWidth} x ${video.videoHeight}`);
    console.log("视频编码格式：", video.videoTracks[0]?.codec);
    
    // 用完记得清理资源，避免内存泄漏
    URL.revokeObjectURL(tempUrl);
    video.remove();
  });

  // 处理切片解析失败的情况（比如特殊格式元数据不在头部）
  video.addEventListener('error', function() {
    console.log("解析元数据失败，可尝试截取更长的文件片段");
    URL.revokeObjectURL(tempUrl);
    video.remove();
  });

  // 开始加载切片解析元数据
  video.src = tempUrl;
}

核心逻辑说明： #

• 视频前置过滤：通过file.type.startsWith('video/')做轻量化校验，快速排除非视频文件，虽然少数特殊视频的type可能不准确，但这是最高效的前置判断方式。
• 零内存加载的文件切片：Blob.slice()是File API的原生方法，它不会复制文件内容到内存，只是创建一个指向原文件指定范围的"指针"，性能开销极低。
• 利用浏览器解析能力：浏览器的<video>元素会自动解析切片中的视频元数据，loadedmetadata事件触发时，我们已经拿到了时长、分辨率等核心信息，全程没有加载完整文件。
• 资源清理：必须调用URL.revokeObjectURL释放临时URL，同时移除创建的视频元素，避免不必要的内存占用。

如果遇到少数元数据存放在文件末尾的特殊格式视频，可以尝试截取文件的末尾1MB片段，或者同时拼接开头和末尾的片段来解析，但这种情况在主流视频格式中非常少见。

内容的提问来源于stack exchange，提问作者John Balvin Arias