如何确保视频播放器的播放次数仅在首次播放时增加，而非暂停后再次播放时累加

本文讲解如何通过引入状态标志位控制播放计数逻辑，使视频播放器的播放次数仅在首次点击播放时增加，避免因暂停后继续播放导致重复计数。核心在于区分“开始播放动作”与“完成一次完整播放”。

在当前实现中，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.getIte
m('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 修改。