本文讲解如何为多个独立视频分别控制进度条的显隐逻辑，解决因变量作用域和事件监听时机导致的“播放完成时变量未更新”问题，并提供可稳定运行的 video.js 实现方案。

在使用 Video.js 控制多个视频时，一个常见需求是：仅当某视频已完整播放过一次（即进度达 100%）后，才显示其对应的进度条，以提升用户体验（例如用于教学视频的“回看提示”）。但直接在 light() 函数内声明 video1 = false、video2 = false 会导致每次调用函数时变量被重置，无法持久记录播放状态——这正是原代码中 video1 = true 赋值后仍不生效的根本原因。

✅ 正确做法：使用闭包或外部状态管理

应将视频播放状态（如 video1Played, video2Played）提升至函数作用域之外，确保状态跨多次调用保持有效：

// ✅ 全局状态变量（推荐放在 

✅ 最终效果

• 首次点击视频 1 → 进度条隐藏，实时显示百分比；播完自动显示进度条；
• 切换至视频 2 → 独立状态，同样逻辑生效；
• 再次点击已播完的视频 → 进度条始终可见，支持拖拽回看。

该方案真正实现了「每个视频独立记忆播放完成状态」，结构清晰、健壮可靠，适用于多视频切换场景。