dysync/docs/视频预览功能测试指南.md

视频预览功能测试指南

✅ 功能已实现

• ✅ 后端视频流接口（支持 Range 请求）
• ✅ 后端 Cookie 认证支持
• ✅ 前端视频播放器组件
• ✅ 表格预览按钮

🧪 测试步骤

步骤1：确保已登录

1. 访问 http://localhost:8001
2. 如果未登录，使用以下账号登录：
   • 用户名：douyin
   • 密码：douyin2025

步骤2：进入同步记录页面

1. 点击左侧菜单「同步记录」
2. 或直接访问：http://localhost:8001/workplace

步骤3：查找有视频的记录

在视频列表中：

• 找到有 videoSavePath 字段的记录
• 「预览」按钮应该是可点击的（不是灰色）
• 如果按钮是灰色的，说明该记录没有视频文件

步骤4：点击预览按钮

1. 点击视频行右侧「操作」列的「预览」按钮
2. 视频播放器模态框应该会打开

步骤5：测试播放功能

在视频播放器中测试：

• ✅ 播放/暂停：点击播放按钮
• ✅ 音量控制：调整音量滑块
• ✅ 进度条拖拽：拖动进度条到任意位置（测试 Range 请求）
• ✅ 全屏播放：点击全屏按钮
• ✅ 视频信息显示：检查作者、分类、分辨率、文件大小是否正确显示

🔍 验证检查清单

前端检查

• 「预览」按钮可见且可点击
• 点击后模态框正常打开
• 视频信息正确显示
• 视频可以正常播放
• 进度条可以拖拽（Range 请求）
• 全屏功能正常

后端检查

• 视频流接口返回 200 状态码
• 支持 Range 请求（206 状态码）
• Cookie 认证正常工作
• 视频文件可以正常读取

🐛 常见问题排查

问题1：预览按钮是灰色的

原因：该视频记录没有 videoSavePath 字段

解决方法：

• 检查数据库中该视频是否有 videoSavePath
• 确认视频文件是否已下载

问题2：点击预览后没有反应

检查：

1. 打开浏览器控制台（F12）
2. 查看 Console 标签是否有错误
3. 查看 Network 标签，检查 /api/video/stream/{id} 请求
4. 查看请求状态码：
   • 200：成功
   • 401：未授权（需要重新登录）
   • 404：视频不存在
   • 500：服务器错误

问题3：视频无法播放

可能原因：

1. 401 未授权：

   • 检查是否已登录
   • 检查 Cookie 中是否有 token
   • 重新登录

2. 404 视频不存在：

   • 检查视频文件是否实际存在
   • 检查 videoSavePath 路径是否正确

3. 视频格式不支持：

   • 检查浏览器是否支持该视频格式
   • 尝试使用其他浏览器

4. 网络问题：

   • 检查后端服务是否正常运行
   • 检查网络连接

问题4：视频加载很慢

原因：大文件需要时间加载

解决方法：

• 等待加载完成
• 检查网络速度
• 查看浏览器 Network 标签，确认下载速度

问题5：Range 请求不工作（无法拖拽）

检查：

1. 打开浏览器 Network 标签
2. 拖动视频进度条
3. 查看是否有新的请求，状态码应该是 206
4. 检查响应头是否有 Content-Range 字段

🔧 调试技巧

1. 浏览器控制台调试

// 在浏览器控制台执行，检查 token
document.cookie

// 检查视频 URL
// 打开视频播放器后，在控制台执行：
document.querySelector('video').src

2. 网络请求检查

1. 按 F12 打开开发者工具
2. 切换到「Network」标签
3. 点击「预览」按钮
4. 查看 /api/video/stream/{id} 请求：
   • Request Headers：检查是否有 Cookie
   • Response Headers：检查 Accept-Ranges: bytes
   • Status Code：应该是 200 或 206

3. 后端日志检查

查看后端日志文件：

tail -f logs/log-debug-20251120.txt | grep -E "(video|stream|401|404)"

📝 测试记录模板

测试日期：____
测试浏览器：____
测试视频ID：____
测试结果：
- [ ] 预览按钮可见
- [ ] 模态框正常打开
- [ ] 视频信息显示正确
- [ ] 视频可以播放
- [ ] 进度条可以拖拽
- [ ] 全屏功能正常
- [ ] Range 请求正常（206状态码）

问题记录：
1. 
2. 

🎯 快速测试命令

测试 API（需要先登录获取 token）

# 1. 登录获取 token（通过浏览器登录后，从 Cookie 中获取）
# 2. 测试视频流接口
curl -H "Cookie: Authorization=Bearer YOUR_TOKEN" \
  http://localhost:10101/api/video/stream/VIDEO_ID \
  --output test_video.mp4

# 3. 测试 Range 请求
curl -H "Cookie: Authorization=Bearer YOUR_TOKEN" \
  -H "Range: bytes=0-1023" \
  http://localhost:10101/api/video/stream/VIDEO_ID \
  -v

✅ 预期结果

1. 点击预览按钮 → 模态框打开
2. 视频加载 → 显示加载动画，然后显示视频
3. 点击播放 → 视频开始播放
4. 拖动进度条 → 视频跳转到对应位置（Range 请求）
5. 全屏播放 → 视频全屏显示
6. 关闭模态框 → 视频停止播放，模态框关闭

---

提示：如果遇到问题，请按照上述排查步骤逐一检查，并查看浏览器控制台和网络请求的详细信息。