本文讲解如何为多个独立视频分别控制进度条的显隐逻辑，解决因变量作用域和事件监听时机导致的“播放完成时变量未更新”问题，并提供可稳定运行的 video.js 实现方案。
在使用 Video.js 控制多个视频时，一个常见需求是：仅当某视频已完整播放过一次（即进度达 100%）后，才显示其对应的进度条，以提升用户体验（例如用于教学视频的“回看提示”）。但直接在 light() 函数内声明 video1 = false、video2 = false 会导致每次调用函数时变量被重置，无法持久记录播放状态——这正是原代码中 video1 = true 赋值后仍不生效的根本原因。
✅ 正确做法：使用闭包或外部状态管理
应将视频播放状态（如 video1Played, video2Played）提升至函数作用域之外，确保状态跨多次调用保持有效：
// ✅ 全局状态变量（推荐放在 <script> 标签顶部或模块顶层）
let video1Played = false;
let video2Played = false;
function light(Cvideo) {
const player = videojs("videoP");
let videoSrc = "";
// 重置状态前先清理旧监听器（关键！避免重复绑定）
player.off("timeupdate");
if (Cvideo === 1) {
document.getElementById("nameV").innerHTML = "1";
videoSrc = "video/1.mp4";
if (!video1Played) {
player.controlBar.progressControl.hide();
player.on("timeupdate", function () {
const percentage = (player.currentTime() / player.duration()) * 100;
document.getElementById("percentage").textContent = Math.round(percentage) + "%";
if (percentage >= 99.5) { // 使用 ≥99.5% 更鲁棒（避免浮点精度导致 100% 不触发）
video1Played = true;
player.controlBar.progressControl.show(); // 立即显示，无需等待下次调用
}
});
} else {
player.controlBar.progressControl.show();
}
} else if (Cvideo === 2) {
document.getElementById("nameV").innerHTML = "2";
videoSrc = "video/2.mp4";
if (!video2Played) {
player.controlBar.progressControl.hide();
player.on("timeupdate", function () {
const percentage = (player.currentTime() / player.duration()) * 100;
document.getElementById("percentage").textContent = Math.round(percentage) + "%";
if (percentage >= 99.5) {
video2Played = true;
player.controlBar.progressControl.show();
}
});
} else {
player.controlBar.progressControl.show();
}
}
// ✅ 必须设置新视频源并重新加载
player.src({ type: "video/mp4", src: videoSrc });
player.load(); // 显式调用 load() 确保元数据就绪
player.play().catch(e => console.warn("Autoplay prevented:", e));
}⚠️ 关键注意事项
- 避免重复绑定事件：每次切换视频前必须调用 player.off("timeupdate")，否则会累积多个监听器，导致 percentage 计算异常甚至内存泄漏。
- 精度容错：percentage === 100 在浮点运算中极难精确命中，建议改用 >= 99.5。
- 资源加载顺序：player.src() 后需调用 player.load() 再 player.play()，确保 duration() 可正确读取（否则 currentTime()/duration() 会返回 NaN）。
-
CDN 引入必备：务必在 HTML 中引入 Video.js 官方资源：
<link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>
✅ 最终效果
- 首次点击视频 1 → 进度条隐藏，实时显示百分比；播完自动显示进度条；
- 切换至视频 2 → 独立状态，同样逻辑生效；
- 再次点击已播完的视频 → 进度条始终可见，支持拖拽回看。
该方案真正实现了「每个视频独立记忆播放完成状态」，结构清晰、健壮可靠，适用于多视频切换场景。
