# 视频播放器缓冲遮罩问题修复说明 ## 问题 视频已经在播放(有 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