Element UI 上传视频后无法在 el-video 中正常播放？

Question

Element UI 上传视频后无法在 `el-video` 中正常播放，常见原因是**文件未正确转为可播放的 Blob URL 或 HTTP 路径**。`el-upload` 默认通过 `file.raw` 获取原生 File 对象，但若直接将 `file.raw` 赋值给 `el-video` 的 `src`，浏览器会因跨域或 MIME 类型不匹配而静音/黑屏/报错（如 `DOMException: The element has no supported sources`）。此外，若后端返回的是相对路径或未配置 CORS，或视频格式（如 `.mov`、`.webm`）未被目标浏览器原生支持，也会导致播放失败。关键排查点包括：① 确保使用 `URL.createObjectURL(file.raw)` 创建临时 Blob URL 并及时释放；② 检查响应头 `Content-Type` 是否为 `video/*`；③ 验证服务端是否开启 CORS 且允许 `Accept-Ranges: bytes`（流式播放必需）；④ 避免直接绑定 `file` 对象或 base64 字符串（性能差且不支持流控）。建议统一用 `ref` 手动控制 `el-video` 实例并监听 `canplay` 事件验证加载状态。

Answer 1

```html

一、现象层：典型报错与表征行为

开发者常遇到 el-video 渲染后黑屏、静音、进度条不可拖动，控制台抛出 DOMException: The element has no supported sources 或 Failed to load resource: net::ERR_FILE_NOT_FOUND。视频预览区域显示空白或“×”图标，video.readyState === 0 持续为真。此阶段无需深入代码，仅通过浏览器 DevTools 的 Network 和 Console 面板即可快速定位——这是问题暴露的“第一现场”。

二、链路层：上传→存储→加载的全路径断点分析

• 前端上传侧：使用 el-upload 的 on-success 回调时，错误地将 response.url（相对路径）或 file.raw（File 对象）直接赋值给 el-video.src；
• 服务端响应侧：返回的视频 URL 未配置 CORS 头（如缺失 Access-Control-Allow-Origin: *），或未声明 Accept-Ranges: bytes；
• 浏览器解码侧：用户上传 .mov（H.264+Apple ProRes）或 .webm（VP9）格式，但目标浏览器（如 IE11 或旧版 Safari）不支持其编码/容器组合。

三、技术根因层：四大核心失效机制

序号	机制	触发条件	验证方式
①	Blob URL 未正确生成或泄漏	未调用 URL.createObjectURL(file.raw)，或多次调用未 revokeObjectURL	DevTools → Memory → Heap Snapshot 查看是否存在大量 blob: URL 引用
②	MIME 类型失配	服务端返回 Content-Type: text/plain 或空头	Network 面板查看响应头中 Content-Type 是否为 video/mp4 等合法值

四、解决方案层：生产级可落地的三段式实现

1. 客户端预览（本地文件）：在 el-upload 的 before-upload 中拦截 file，生成 Blob URL 并绑定至 ref 视频实例：
2. 服务端回显（远程文件）：确保 Nginx/Apache 配置启用字节范围支持：add_header Accept-Ranges bytes;，并校验 Content-Type 自动映射（如 mp4 → video/mp4）；
3. 健壮性兜底：监听 canplay、error、stalled 事件，结合 video.duration 和 video.buffered.end(0) 判断真实就绪状态。

五、工程实践层：推荐代码结构与避坑清单

// ✅ 正确做法：使用 ref + createObjectURL + revoke
export default {
  data() {
    return { videoSrc: '' };
  },
  methods: {
    handleVideoUpload(file) {
      const url = URL.createObjectURL(file);
      this.videoSrc = url;
      // 后续在组件销毁或新上传前执行：
      // this.$nextTick(() => URL.revokeObjectURL(url));
      return false; // 阻止自动上传，交由自定义逻辑处理
    }
  }
};

六、深度诊断层：CORS 与流式播放的底层协同机制

浏览器对 <video> 的流式播放（seek、buffering）强依赖 HTTP 206 Partial Content 响应。若服务端未开启 Accept-Ranges: bytes，即使 CORS 允许，首次加载成功后拖动进度条仍会触发 net::ERR_FAILED。可通过 curl 验证：

curl -I -H "Range: bytes=0-999" https://api.example.com/video.mp4
# 应返回 206 及 Header: Content-Range: bytes 0-999/12345678

七、架构演进层：面向未来的替代方案建议

graph LR
A[用户上传] --> B{格式判断}
B -->|MP4/H.264| C[直传 CDN + el-video]
B -->|MOV/AVI/HEVC| D[Web Worker 转码为 MP4]
D --> E[上传转码后文件]
E --> F[CDN 返回带 CORS & Accept-Ranges 的 URL]
F --> G[el-video 加载]

```