188 lines
5.0 KiB
Markdown
188 lines
5.0 KiB
Markdown
# 视频播放问题修复验证
|
||
|
||
## 🔍 问题分析总结
|
||
|
||
### 发现的关键问题
|
||
|
||
#### 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. **实现视频转码功能**
|
||
|
||
---
|
||
|
||
*修复完成后，视频播放功能应该能正常工作！*
|