闭包在音视频播放器中用于封装和持久化播放状态（如当前进度、音量），避免全局变量污染并确保状态与实例绑定；通过函数作用域捕获私有变量，仅暴露API操作，支持多实例独立、事件自动同步及localStorage持久化。
闭包在音视频播放器中常用于封装和持久化播放状态（如当前进度、音量），避免全局变量污染，同时确保这些状态与特定播放器实例绑定。核心思路是：在创建播放器时，用函数作用域“捕获”并维护私有状态，再通过返回的方法访问或修改它。
用闭包封装播放器状态
把 currentTime 和 volume 作为闭包内的局部变量，外部无法直接访问，只能通过暴露的 API 操作：
function createPlayer(videoElement) {
let currentTime = 0;
let volume = 1.0;
<p>return {
play() {
videoElement.currentTime = currentTime;
videoElement.volume = volume;
videoElement.play();
},
pause() {
currentTime = videoElement.currentTime;
videoElement.pause();
},
setVolume(v) {
volume = Math.max(0, Math.min(1, v)); // 限制在 0–1
videoElement.volume = volume;
},
getVolume() {
return volume;
},
seek(time) {
currentTime = Math.max(0, time);
videoElement.currentTime = currentTime;
},
getCurrentTime() {
return currentTime;
}
};
}</p><p>// 使用示例
const player1 = createPlayer(document.getElementById('video1'));
player1.seek(65); // 保存进度到闭包内
player1.setVolume(0.7);
player1.play(); // 播放时自动应用已保存的状态
结合事件监听自动同步状态
仅靠手动调用不够健壮。实际中应监听播放器原生事件，在暂停、时间更新、音量变化时自动更新闭包内状态：
function createSmartPlayer(videoElement) {
let currentTime = 0;
let volume = videoElement.volume || 1.0;
<p>// 自动更新当前时间（节流处理避免频繁赋值）
let lastSync = 0;
const syncTime = () => {
if (Date.now() - lastSync > 200) {
currentTime = videoElement.currentTime;
lastSync = Date.now();
}
};</p><p>videoElement.addEventListener('timeupdate', syncTime);
videoElement.addEventListener('volumechange', () => {
volume = videoElement.volume;
});
videoElement.addEventListener('pause', () => {
currentTime = videoElement.currentTime;
});</p><p>return {
getCurrentTime: () => currentTime,
getVolume: () => volume,
seek: (t) => {
currentTime = t;
videoElement.currentTime = t;
},
setVolume: (v) => {
volume = Math.max(0, Math.min(1, v));
videoElement.volume = volume;
}
};
}
支持多个播放器独立状态
每个 createSmartPlayer() 调用都生成独立的闭包，互不干扰。适合页面中有多个视频/音频组件的场景：
立即学习“Java免费学习笔记（深入）”；
- playerA 的进度和音量完全独立于 playerB
- 即使共享同一个
<video></video>元素（不推荐），也能隔离逻辑状态 - 便于单元测试——状态可预测、无副作用
进阶：配合 localStorage 持久化
闭包本身只在内存中存在。如需刷新后恢复，可在闭包内集成本地存储：
function createPersistentPlayer(videoElement, playerId) {
let currentTime = parseFloat(localStorage.getItem(`${playerId}-time`) || '0');
let volume = parseFloat(localStorage.getItem(`${playerId}-volume`) || '1');
<p>const saveState = () => {
localStorage.setItem(<code>${playerId}-time</code>, currentTime.toString());
localStorage.setItem(<code>${playerId}-volume</code>, volume.toString());
};</p><p>videoElement.addEventListener('timeupdate', () => {
currentTime = videoElement.currentTime;
});
videoElement.addEventListener('volumechange', () => {
volume = videoElement.volume;
});
videoElement.addEventListener('pause', saveState);
videoElement.addEventListener('ended', saveState);</p><p>return {
seek: (t) => {
currentTime = t;
videoElement.currentTime = t;
},
setVolume: (v) => {
volume = Math.max(0, Math.min(1, v));
videoElement.volume = volume;
}
};
}
