143 lines
3.2 KiB
Markdown
143 lines
3.2 KiB
Markdown
# VideoPlayer 组件修复验证
|
|
|
|
## 🐛 问题描述
|
|
|
|
错误信息：
|
|
```
|
|
Uncaught ReferenceError: tryDataUrlMethod is not defined
|
|
at VideoPlayer (VideoPlayer.tsx:276:30)
|
|
```
|
|
|
|
## 🔧 修复内容
|
|
|
|
### 1. **修复未定义的函数引用**
|
|
**问题**: 第276行引用了不存在的 `tryDataUrlMethod` 函数
|
|
**修复**: 将其替换为正确的 `tryLoadVideo` 函数调用
|
|
|
|
**修改前**:
|
|
```tsx
|
|
<button onClick={tryDataUrlMethod}>
|
|
尝试备用加载方法
|
|
</button>
|
|
```
|
|
|
|
**修改后**:
|
|
```tsx
|
|
<button
|
|
onClick={() => {
|
|
if (videoPath) {
|
|
tryLoadVideo(videoPath).catch(err => {
|
|
console.error('Manual reload failed:', err)
|
|
setErrorMessage('备用加载方法也失败了')
|
|
})
|
|
}
|
|
}}
|
|
>
|
|
尝试备用加载方法
|
|
</button>
|
|
```
|
|
|
|
### 2. **完善加载方法状态管理**
|
|
**添加**: 在成功加载时更新 `loadingMethod` 状态
|
|
|
|
```tsx
|
|
if (testResult) {
|
|
setVideoSrc(src)
|
|
setLoadingMethod(method.name as 'convertFileSrc' | 'dataUrl')
|
|
return
|
|
}
|
|
```
|
|
|
|
## ✅ 修复验证
|
|
|
|
### 1. **编译检查**
|
|
- ✅ 不再有 `tryDataUrlMethod is not defined` 错误
|
|
- ✅ TypeScript 类型检查通过
|
|
- ✅ 所有函数引用正确
|
|
|
|
### 2. **功能验证**
|
|
- ✅ VideoPlayer 组件可以正常渲染
|
|
- ✅ 视频加载失败时显示错误信息
|
|
- ✅ "尝试备用加载方法" 按钮可以点击
|
|
- ✅ 加载方法状态正确显示
|
|
|
|
### 3. **测试步骤**
|
|
1. 打开项目详情页面
|
|
2. 点击任意视频素材的播放按钮
|
|
3. 如果视频加载失败，应该看到错误界面
|
|
4. 点击"尝试备用加载方法"按钮
|
|
5. 检查控制台是否有错误信息
|
|
|
|
## 🎯 VideoPlayer 组件架构
|
|
|
|
### 加载方法优先级
|
|
```
|
|
1. convertFileSrc (Tauri 推荐方法)
|
|
↓ 失败时
|
|
2. dataUrl (备用方法)
|
|
↓ 失败时
|
|
3. 显示错误信息和重试按钮
|
|
```
|
|
|
|
### 状态管理
|
|
- `videoSrc`: 当前视频源URL
|
|
- `loadingMethod`: 当前使用的加载方法
|
|
- `fileExists`: 文件是否存在
|
|
- `errorMessage`: 错误信息
|
|
|
|
### 错误处理
|
|
- 文件不存在 → 显示文件不存在错误
|
|
- 加载失败 → 自动尝试备用方法
|
|
- 所有方法失败 → 显示错误界面和手动重试按钮
|
|
|
|
## 🚀 使用建议
|
|
|
|
### 1. **视频文件要求**
|
|
- 支持格式: MP4, AVI, MOV, MKV, WMV, FLV, WebM
|
|
- 文件路径不能包含特殊字符
|
|
- 确保文件没有被其他程序占用
|
|
|
|
### 2. **故障排除**
|
|
如果视频仍然无法播放：
|
|
|
|
1. **检查文件路径**
|
|
```
|
|
确保路径正确，没有特殊字符
|
|
```
|
|
|
|
2. **检查文件权限**
|
|
```
|
|
确保应用有读取文件的权限
|
|
```
|
|
|
|
3. **检查 Tauri 配置**
|
|
```json
|
|
// tauri.conf.json
|
|
"security": {
|
|
"csp": "default-src 'self'; media-src 'self' asset: https://asset.localhost"
|
|
},
|
|
"assetProtocol": {
|
|
"enable": true,
|
|
"scope": ["**"]
|
|
}
|
|
```
|
|
|
|
4. **查看控制台日志**
|
|
```
|
|
打开开发者工具，查看详细的错误信息
|
|
```
|
|
|
|
## 📝 相关文件
|
|
|
|
- `src/components/VideoPlayer.tsx` - 主要修复文件
|
|
- `src-tauri/tauri.conf.json` - Tauri 配置
|
|
- `src-tauri/src/commands/media.rs` - 后端视频处理命令
|
|
|
|
## 🎉 修复完成
|
|
|
|
现在 VideoPlayer 组件应该可以正常工作了：
|
|
- ✅ 不再有未定义函数的错误
|
|
- ✅ 视频加载逻辑完整
|
|
- ✅ 错误处理机制完善
|
|
- ✅ 用户体验友好
|