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 |