本文详解如何使用 video.js 为不同视频（如 video1/video2）维护独立状态，实现在播放完成（100%）后才显示进度条，并避免变量作用域与事件绑定逻辑错误。
在 Video.js 中动态控制进度条（progressControl）的显隐，关键在于：状态需持久化、事件监听需正确绑定、且每个视频的状态必须相互隔离。你原始代码的核心问题并非语法错误，而是逻辑结构缺陷——video1 和 video2 被定义为函数局部变量，每次调用 light(Cvideo) 都会重新初始化为 false，导致 video1 = true 的赋值永远无法跨调用保留，自然无法触发后续的 show() 分支。
✅ 正确方案：使用闭包或外部状态管理
推荐将视频状态提升至全局作用域（或模块级），确保状态在多次调用间持续有效：
// 全局状态对象 —— 每个视频 ID 对应独立布尔标记
const videoStates = {
1: false,
2: false
};
function light(Cvideo) {
const player = videojs("videoP");
const videoSrc = Cvideo === 1
? "video/1.mp4"
: "video/2.mp4";
// 更新视频标题（可选）
document.getElementById("nameV").textContent = Cvideo;
// 重置进度显示
document.getElementById("percentage").textContent = "0%";
// 根据当前视频 ID 判断是否已播放完成过
if (videoStates[Cvideo]) {
player.controlBar.progressControl.show();
} else {
player.controlBar.progressControl.hide();
// 绑定一次 timeupdate 监听器（防重复绑定！）
const handleTimeUpdate = () => {
const currentTime = player.currentTime();
const duration = player.duration();
if (duration && !isNaN(duration)) { // 确保 duration 可用
const percentage = Math.round((currentTime / duration) * 100);
document.getElementById("percentage").textContent = `${percentage}%`;
if (percentage >= 99.9) { // 使用 >= 99.9 更鲁棒（浮点精度问题）
videoStates[Cvideo] = true;
player.controlBar.progressControl.show();
player.off("timeupdate", handleTimeUpdate); // ✅ 移除监听，避免内存泄漏
}
}
};
player.on("timeupdate", handleTimeUpdate);
}
// 加载并播放新视频
player.src({ type: "video/mp4", src: videoSrc });
player.play();
}⚠️ 关键注意事项
- 避免重复绑定事件：每次调用 light() 都新增 timeupdate 监听器会导致多个监听器累积，引发性能问题和逻辑混乱。务必在满足条件后调用 player.off() 清理。
- duration() 异步性：player.duration() 在元数据加载完成前可能返回 NaN 或 0，务必加 if (duration && !isNaN(duration)) 安全判断。
- 100% 判定要宽容：由于浮点计算误差，percentage === 100 很难精确命中，建议改用 percentage >= 99.9。
-
CDN 资源引用：确保在 HTML <head> 中正确引入 Video.js CSS 与 JS（版本建议 ≥7.20）：
<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>
? 扩展建议（进阶）
若项目规模扩大，推荐封装为类或使用现代模块系统（ESM）管理状态：
class VideoProgressManager {
constructor(playerId) {
this.player = videojs(playerId);
this.states = new Map(); // Map<videoId, Boolean>
}
showOnComplete(videoId, src) {
if (this.states.get(videoId)) {
this.player.controlBar.progressControl.show();
} else {
this.player.controlBar.progressControl.hide();
const onTimeUpdate = () => { /* ... 同上逻辑 ... */ };
this.player.on("timeupdate", onTimeUpdate);
// 记得在完成时 this.states.set(videoId, true)
}
this.player.src({ type: "video/mp4", src });
}
}通过合理管理状态生命周期与事件绑定时机，即可实现多视频间完全独立的进度条行为控制——既符合用户体验（首次播放隐藏干扰项），又保障逻辑健壮性。
