拖拽上传Web应用：使用FileReader挂载MOV视频失败，求解决方案

核心修复：替换FileReader为URL.createObjectURL #

你的问题出在使用FileReader.readAsDataURL处理MOV视频上，大体积的MOV文件转base64后，浏览器解析视频源时容易出现加载失败，而且这种方式内存开销极大。虽然有说法称createObjectURL被弃用，但仅当搭配MediaSource使用时才会被弃用，处理本地File/Blob对象时完全安全可用。

修改你的attachVideo函数：

function attachVideo(file, fileName, section) {
  let video = document.createElement('video');
  // 创建本地文件URL
  video.src = URL.createObjectURL(file);
  video.id = fileName;
  video.controls = true;
  
  // 视频加载完成后释放URL，避免内存泄漏
  video.addEventListener('loadeddata', () => {
    URL.revokeObjectURL(video.src);
  });
  
  // 添加错误监听，方便排查编码兼容性问题
  video.addEventListener('error', (e) => {
    console.error('视频加载错误:', e.target.error);
  });
  
  section.appendChild(video);
}

额外排查点 #

• 编码兼容性：浏览器仅支持特定编码的MOV视频（比如H.264视频编码+AAC音频编码是通用支持的），如果你的MOV用了ProRes等小众编码，浏览器无法解码，就会显示空白图标。可以通过video.error事件返回的错误码判断：
  • MEDIA_ERR_DECODE：编码不支持
  • MEDIA_ERR_SRC_NOT_SUPPORTED：文件格式或源有问题
• 文件完整性：确认拖拽的MOV文件本身没有损坏，可在本地播放器测试能否正常播放。

内容的提问来源于stack exchange，提问作者fowler.t