5.0 KiB

Raw Permalink Blame History

视频播放问题修复验证

🔍 问题分析总结

发现的关键问题

1. CSP配置缺失 (主要原因)

问题: CSP中缺少media-src和video-src指令

// 修复前
"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配置修复

{
  "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. 改进的视频加载逻辑

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元素源设置

// 修复前：动态添加source元素
const source = document.createElement('source');
source.src = videoSrc;
video.appendChild(source);

// 修复后：直接设置src
video.src = videoSrc
video.load()

🧪 测试验证

1. 重启应用

# 重新启动开发服务器以应用CSP配置
pnpm tauri dev

2. 测试步骤

导入视频文件
- 尝试导入不同格式的视频 (MP4, AVI, MOV)
- 检查导入是否成功
视频播放测试
- 点击视频素材的播放按钮
- 观察是否能正常打开VideoPlayer
- 检查视频是否能正常播放
控制台检查
- 打开浏览器开发者工具
- 查看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配置

在浏览器控制台运行：

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. 检查文件路径

// 在控制台检查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. 缓存策略

考虑实现视频缓存机制
避免重复加载相同视频

🎯 下一步优化

添加视频格式检测
实现加载进度条
优化大文件处理
添加视频预览缩略图
实现视频转码功能

修复完成后，视频播放功能应该能正常工作！

5.0 KiB Raw Permalink Blame History Unescape Escape