62 lines
2.1 KiB
Markdown
62 lines
2.1 KiB
Markdown
|
# 视频播放器缓冲遮罩问题修复说明
|
|||
|
|
|
|||
|
|
## 问题
|
|||
|
|
视频已经在播放（有 timeupdate 事件），但缓冲遮罩一直显示，影响用户体验。
|
|||
|
|
|
|||
|
|
## 已完成的修改
|
|||
|
|
|
|||
|
|
1. ✅ 添加了下载进度条显示
|
|||
|
|
2. ✅ 添加了错误处理界面和自动重试机制
|
|||
|
|
3. ✅ 添加了触觉反馈
|
|||
|
|
4. ✅ 优化了 `onVideoWaiting()` 方法 - 忽略播放中的偶发 waiting 事件
|
|||
|
|
5. ✅ 优化了 `onVideoPlay()` 方法 - 清除 waiting 定时器
|
|||
|
|
6. ✅ 优化了 `onTimeUpdate()` 方法 - 及时清除 waiting 状态
|
|||
|
|
7. ✅ 优化了 `showLoadingOverlay()` 计算属性 - 播放中不显示遮罩
|
|||
|
|
|
|||
|
|
## 需要手动修改的部分
|
|||
|
|
|
|||
|
|
由于文件格式问题，请手动修改以下两处：
|
|||
|
|
|
|||
|
|
### 修改 1: onVideoPause() 方法 (约第 1125 行)
|
|||
|
|
|
|||
|
|
将：
|
|||
|
|
```javascript
|
|||
|
|
onVideoPause() {
|
|||
|
|
console.log('[VideoPlayer] 视频暂停');
|
|||
|
|
this.isVideoPlaying = false;
|
|||
|
|
// 循环重播时会触发 pause 事件，避免误把音频也暂停
|
|||
|
|
if (this.isLoopingRestart) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 系统等待/缓冲导致的暂停：不要暂停音频，避免造成"中断后无法恢复"
|
|||
|
|
if (this.videoWaiting || !this.userPaused) {
|
|||
|
|
console.log('[VideoPlayer] 非用户暂停(可能缓冲/系统暂停)，不联动暂停音频');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
改为：
|
|||
|
|
```javascript
|
|||
|
|
onVideoPause() {
|
|||
|
|
console.log('[VideoPlayer] 视频暂停，userPaused=', this.userPaused, 'videoWaiting=', this.videoWaiting);
|
|||
|
|
// 循环重播时会触发 pause 事件，避免误把音频也暂停
|
|||
|
|
if (this.isLoopingRestart) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 如果是用户主动暂停，才更新播放状态
|
|||
|
|
if (this.userPaused) {
|
|||
|
|
this.isVideoPlaying = false;
|
|||
|
|
}
|
|||
|
|
// 系统等待/缓冲导致的暂停：不要暂停音频，避免造成"中断后无法恢复"
|
|||
|
|
if (this.videoWaiting || !this.userPaused) {
|
|||
|
|
console.log('[VideoPlayer] 非用户暂停(可能缓冲/系统暂停)，不联动暂停音频');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.isVideoPlaying = false;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 核心修复逻辑
|
|||
|
|
|
|||
|
|
1. **showLoadingOverlay 计算属性**：当视频正在播放且有 timeupdate 时，不显示加载遮罩
|
|||
|
|
2. **onVideoWaiting**：忽略播放中的偶发 waiting 事件（500ms 内有 timeupdate）
|
|||
|
|
3. **onTi
|