fix: video player

2025-07-11 18:03:11 +08:00
parent 5a90495561
commit c75985188e
3 changed files with 433 additions and 11 deletions
--- a/scripts/test_video_fix.md
+++ b/scripts/test_video_fix.md
@@ -0,0 +1,187 @@
+# 视频播放问题修复验证
+
+## 🔍 问题分析总结
+
+### 发现的关键问题
+
+#### 1. **CSP配置缺失** (主要原因)
+**问题**: CSP中缺少`media-src`和`video-src`指令
+```json
+// 修复前
+"csp": "default-src 'self'; img-src 'self' asset: data: http://asset.localhost; ..."
+
+// 修复后  
+"csp": "default-src 'self'; img-src 'self' asset: data: http://asset.localhost; media-src 'self' asset: http://asset.localhost; video-src 'self' asset: http://asset.localhost; ..."
+```
+
+#### 2. **VideoPlayer组件问题**
+- **动态添加source元素**: 每次都添加新的source，导致重复和冲突
+- **错误处理不完善**: 缺少备用加载方案
+- **convertFileSrc参数**: 之前有错误的第二个参数
+
+### 为什么图片可以加载但视频不行？
+
+| 资源类型 | CSP指令 | 修复前状态 | 修复后状态 |
+|----------|---------|------------|------------|
+| 图片 | `img-src` | ✅ 已配置 | ✅ 正常 |
+| 视频 | `media-src` | ❌ 缺失 | ✅ 已添加 |
+| 视频 | `video-src` | ❌ 缺失 | ✅ 已添加 |
+
+## 🔧 修复内容
+
+### 1. CSP配置修复
+```json
+{
+  "security": {
+    "csp": "default-src 'self'; img-src 'self' asset: data: http://asset.localhost; media-src 'self' asset: http://asset.localhost; video-src 'self' asset: http://asset.localhost; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' ipc: http://ipc.localhost"
+  }
+}
+```
+
+### 2. VideoPlayer组件优化
+
+#### A. 改进的视频加载逻辑
+```typescript
+const tryLoadVideo = async (path: string) => {
+  try {
+    // 首先尝试convertFileSrc方法
+    const src = convertFileSrc(path)
+    setVideoSrc(src)
+    setLoadingMethod('convertFileSrc')
+  } catch (error) {
+    // 备用方案：data URL方法
+    const dataUrl = await invoke<string>('read_video_as_data_url', { filePath: path })
+    setVideoSrc(dataUrl)
+    setLoadingMethod('dataUrl')
+  }
+}
+```
+
+#### B. 修复video元素源设置
+```typescript
+// 修复前：动态添加source元素
+const source = document.createElement('source');
+source.src = videoSrc;
+video.appendChild(source);
+
+// 修复后：直接设置src
+video.src = videoSrc
+video.load()
+```
+
+## 🧪 测试验证
+
+### 1. 重启应用
+```bash
+# 重新启动开发服务器以应用CSP配置
+pnpm tauri dev
+```
+
+### 2. 测试步骤
+1. **导入视频文件**
+   - 尝试导入不同格式的视频 (MP4, AVI, MOV)
+   - 检查导入是否成功
+
+2. **视频播放测试**
+   - 点击视频素材的播放按钮
+   - 观察是否能正常打开VideoPlayer
+   - 检查视频是否能正常播放
+
+3. **控制台检查**
+   - 打开浏览器开发者工具
+   - 查看Console是否有CSP违规错误
+   - 检查Network请求是否成功
+
+### 3. 预期结果
+
+#### 成功标志
+- ✅ 视频播放器能正常打开
+- ✅ 视频内容能正常显示和播放
+- ✅ 控制台没有CSP违规错误
+- ✅ 播放控制按钮正常工作
+
+#### 可能的日志输出
+```
+try load video src http://asset.localhost/C%3A%5CUsers%5C...%5Cvideo.mp4
+Video load started: http://asset.localhost/...
+Video can play: http://asset.localhost/...
+```
+
+## 🔍 故障排除
+
+### 如果视频仍然无法播放
+
+#### 1. 检查CSP配置
+在浏览器控制台运行：
+```javascript
+console.log(document.querySelector('meta[http-equiv="Content-Security-Policy"]').content)
+```
+确认包含：`media-src 'self' asset: http://asset.localhost; video-src 'self' asset: http://asset.localhost`
+
+#### 2. 检查文件路径
+```javascript
+// 在控制台检查convertFileSrc结果
+import { convertFileSrc } from '@tauri-apps/api/core'
+const testPath = 'C:\\Users\\...\\video.mp4'
+console.log('Converted:', convertFileSrc(testPath))
+```
+
+#### 3. 检查文件格式
+确认视频文件格式被浏览器支持：
+- ✅ MP4 (H.264/AAC)
+- ✅ WebM (VP8/VP9)
+- ❌ AVI (可能不支持)
+- ❌ MOV (可能不支持)
+
+#### 4. 检查文件大小
+大文件可能导致加载超时：
+- 建议测试小于50MB的视频文件
+- 大文件可能需要更长的加载时间
+
+### 常见错误和解决方案
+
+#### 错误1: CSP违规
+```
+Refused to load media from 'asset://...' because it violates CSP
+```
+**解决**: 确认CSP配置正确，重启应用
+
+#### 错误2: 文件不存在
+```
+Asset protocol access denied
+```
+**解决**: 检查文件路径和assetProtocol scope配置
+
+#### 错误3: 格式不支持
+```
+The element has no supported sources
+```
+**解决**: 转换视频格式为MP4 (H.264)
+
+## 📊 性能优化建议
+
+### 1. 视频格式优化
+- 推荐使用MP4格式 (H.264编码)
+- 控制视频分辨率和码率
+- 考虑视频压缩
+
+### 2. 加载策略优化
+- 对于大文件，优先使用convertFileSrc
+- 对于小文件或特殊路径，使用data URL
+- 实现加载进度显示
+
+### 3. 缓存策略
+- 考虑实现视频缓存机制
+- 避免重复加载相同视频
+
+## 🎯 下一步优化
+
+1. **添加视频格式检测**
+2. **实现加载进度条**
+3. **优化大文件处理**
+4. **添加视频预览缩略图**
+5. **实现视频转码功能**
+
+---
+
+*修复完成后，视频播放功能应该能正常工作！*