HTML5怎么添加视频播放统计_记录视频播放次数的JS实现方式【汇总】

视频播放次数必须存服务端或localStorage（轻量场景），监听timeupdate判断进度≥90%并防重，需等待loadedmetadata后再绑定，移动端兼容性与防刷校验是关键。

视频播放次数该存在哪里

不能只靠前端变量计数，页面刷新就归零。必须把数据存到服务端，或者用 localStorage 做轻量级持久化（适合非关键统计，比如内部工具或原型）。如果要求准确、防刷、支持多设备，localStorage 不够用，得走后端 API。

监听 video 播放完成的正确方式

ended 事件只在自然播完时触发，用户拖拽到末尾、静音跳过、快进跳过结尾都不会触发。更稳妥的是监听 timeupdate + 判断播放进度是否到达 90% 以上，再加防重逻辑：

let hasRecorded = false;
video.addEventListener('timeupdate', () => {
  const percent = video.currentTime / video.duration;
  if (percent >= 0.9 && !hasRecorded && !isNaN(video.duration)) {
    recordPlay();
    hasRecorded = true;
  }
});

• isNaN(video.duration) 必须判断，否则 duration 为 NaN 时会报错
• 用 0.9 而不是 1.0，避免因精度或缓冲问题漏触发
• 单次播放只记录一次，靠 hasRecorded 标志位控制

如何防止重复提交和误统计

用户刷新页面、反复暂停/播放、打开多个标签页都会导致重复计数。解决方法分层处理：

• 前端用 localStorage 存 videoId + date 组合键，例如 played_abc123_20250520，当天只记一次
• 后端接口需校验 Referer、User-Agent、IP（可选）、并做幂等设计（如用 INSERT IGNORE 或唯一索引）
• 避免在 play 事件里直接上报——用户点一下又暂停，不算有效播放

兼容性与性能注意点

移动端 Safari 对 video 的自动播放策略极严，play() 可能被拒绝，duration 常为 NaN，需等 loadedmetadata 后再绑定监听：

video.addEventListener('loadedmetadata', () => {
  // 此时 duration 才可靠
  video.addEventListener('timeupdate', handleTimeUpdate);
});

• 不要在 DOMContentLoaded 就绑 timeupdate，此时 video 可能还没加载元信息
• 大量视频列表时，别给每个都开 timeupdate 监听器，用事件委托或懒加载监听
• localStorage 有容量限制（通常 5MB），长期运行要定期清理过期键

实际部署时，最易被忽略的是「首次加载时 duration 不可用」和「移动端无法触发 ended」，这两点不处理，统计基本不准。