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. 浏览器控制台调试

```javascript
// 在浏览器控制台执行，检查 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. 后端日志检查

查看后端日志文件：
```bash
tail -f logs/log-debug-20251120.txt | grep -E "(video|stream|401|404)"
```

## 📝 测试记录模板

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

问题记录：
1. 
2. 
```

## 🎯 快速测试命令

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

```bash
# 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. **关闭模态框** → 视频停止播放，模态框关闭

---

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