ai-clone/video-player-fix.md

视频播放器缓冲遮罩问题修复说明

问题

视频已经在播放（有 timeupdate 事件），但缓冲遮罩一直显示，影响用户体验。

已完成的修改

1. ✅ 添加了下载进度条显示
2. ✅ 添加了错误处理界面和自动重试机制
3. ✅ 添加了触觉反馈
4. ✅ 优化了 onVideoWaiting() 方法 - 忽略播放中的偶发 waiting 事件
5. ✅ 优化了 onVideoPlay() 方法 - 清除 waiting 定时器
6. ✅ 优化了 onTimeUpdate() 方法 - 及时清除 waiting 状态
7. ✅ 优化了 showLoadingOverlay() 计算属性 - 播放中不显示遮罩

需要手动修改的部分

由于文件格式问题，请手动修改以下两处：

修改 1: onVideoPause() 方法 (约第 1125 行)

将：

onVideoPause() {
	console.log('[VideoPlayer] 视频暂停');
	this.isVideoPlaying = false;
	// 循环重播时会触发 pause 事件，避免误把音频也暂停
	if (this.isLoopingRestart) {
		return;
	}
	// 系统等待/缓冲导致的暂停：不要暂停音频，避免造成"中断后无法恢复"
	if (this.videoWaiting || !this.userPaused) {
		console.log('[VideoPlayer] 非用户暂停(可能缓冲/系统暂停)，不联动暂停音频');
		return;
	}

改为：

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