本文讲解如何通过引入状态标志位控制播放计数逻辑，使视频播放器的播放次数仅在首次点击播放时增加，避免因暂停后继续播放导致重复计数。核心在于区分“开始播放动作”与“完成一次完整播放”。
在当前实现中，play 事件监听器会在每次调用 videoElement.play() 时触发（包括暂停后再次播放），从而错误地增加播放次数。正确做法是：仅当视频从初始状态（未播放过）进入播放状态时才计数，而不是每次调用 play() 都计数。
为此，需引入一个布尔状态变量 isFirstPlay（注意命名规范，推荐使用驼峰式而非下划线），并在首次播放后将其置为 false，后续所有 play() 调用均不再触发计数逻辑。
以下是优化后的关键代码段（已整合原逻辑并修复潜在问题）：
const videoPlayer = document.querySelector('.video-player');
const videoElement = videoPlayer.querySelector('.video');
const playCountElement = videoPlayer.querySelector('.play-count');
let playCount = 0;
let isFirstPlay = true; // 标志位：true 表示尚未发生过首次播放
function updatePlayCount() {
playCountElement.textContent = `${playCount} Plays`;
}
function savePlayCount() {
localStorage.setItem('playCount', playCount);
}
function loadPlayCount() {
const stored = localStorage.getItem('playCount');
if (stored !== null) {
playCount = parseInt(stored, 10);
}
}
function playVideo() {
if (isFirstPlay) {
playCount++;
updatePlayCount();
savePlayCount();
isFirstPlay = false;
}
videoElement.play().catch(e => console.warn("Playback prevented:", e)); // 增强兼容性
}
function pauseVideo() {
videoElement.pause();
}
function togglePlayPause() {
if (videoElement.paused) {
playVideo();
} else {
pauseVideo();
}
}
// 重置标志位：当视频自然结束时，可选择是否允许下次播放重新计数
videoElement.addEventListener('ended', function () {
videoElement.currentTime = 0;
// 若希望“每完整播放一次就计数一次”，此处应重置 isFirstPlay = true；
// 但根据需求“只在首次播放时计数”，故不重置 —— 即全程仅计一次
pauseVideo();
});
// 移除错误的 'play' 事件监听器（它会导致重复计数）
// ❌ videoElement.addEventListener('play', ...); ← 必须删除！
videoPlayer.addEventListener('click', togglePlayPause);
// 初始化
window.addEventListener('load', function () {
loadPlayCount();
updatePlayCount();
});⚠️ 关键注意事项：
- 必须移除原代码中 videoElement.addEventListener('play', ...) 这一行，否则它会与 playVideo() 中的逻辑冲突，造成重复计数；
- isFirstPlay 的生命周期应与用户意图一致：若需求是“每个页面加载周期内仅计一次”，则当前设计合理；若需“每次完整播放后都计一次”，则应在 'ended' 回调中重置 isFirstPlay = true；
- 使用 videoElement.play().catch(...) 可避免因浏览器自动播放策略导致的 Promise 拒绝异常；
- parseInt(stored, 10) 显式指定进制，提升健壮性。
该方案简洁、语义清晰，完全满足“播放次数仅在首次播放时增加”的需求，且无需额外 HTML 修改。
