如何修改JavaScript实现视频播放器仅在播放结束后增加播放次数？

问题分析 #

原代码的核心问题是在playVideo函数和videoElement的play事件中都做了播放次数累加，而play事件会在每次视频开始播放（包括暂停后继续播放）时触发，导致暂停后再播放也会增加计数。此外代码中存在未声明的hasBeenPlayed变量，属于潜在bug。

修改后的代码 #

const videoPlayer = document.querySelector('.video-player');
const videoElement = videoPlayer.querySelector('.video');
const playCountElement = videoPlayer.querySelector('.play-count');

let playCount = 0;

// 更新播放次数显示
const updatePlayCount = () => {
    playCountElement.textContent = `${playCount} Plays`;
};

// 保存播放次数到本地存储
const savePlayCount = () => {
    localStorage.setItem('playCount', playCount);
};

// 从本地存储加载播放次数
const loadPlayCount = () => {
    const storedCount = localStorage.getItem('playCount');
    if (storedCount) playCount = parseInt(storedCount, 10);
};

// 播放/暂停切换
const togglePlayPause = () => {
    videoElement.paused ? videoElement.play() : videoElement.pause();
};

// 视频播放完毕时触发：重置进度、累加播放次数
videoElement.addEventListener('ended', () => {
    videoElement.currentTime = 0;
    playCount++;
    updatePlayCount();
    savePlayCount();
    videoElement.pause();
});

// 点击播放器切换播放状态
videoPlayer.addEventListener('click', togglePlayPause);

// 页面加载时初始化播放次数
window.addEventListener('load', () => {
    loadPlayCount();
    updatePlayCount();
});

关键改动说明 #

• 移除原play事件的累加逻辑，避免暂停后继续播放时误增计数。
• 仅在ended事件中累加播放次数，确保只有视频完整播放结束才计数。
• 精简函数写法（使用箭头函数），合并重复逻辑，移除冗余的playVideo和pauseVideo函数（直接调用视频元素的play()/pause()更简洁）。
• 移除未被实际使用的hasBeenPlayed变量，修复隐式全局变量问题。
• 在parseInt中添加基数10，避免潜在的进制解析错误。

内容的提问来源于stack exchange，提问作者Chauncey Moore