HTML5视频播放统计JS实现技巧

本文深入解析了HTML5视频播放统计的可靠实现方案，重点破解了前端统计中常见的“刷新归零”“移动端失效”“拖拽漏计”“重复上报”等痛点：强调必须依托服务端或localStorage持久化存储（而非临时变量），采用`timeupdate`监听结合90%进度阈值与防重标志位替代不稳定的`ended`事件，并指出`loadedmetadata`时机对获取准确`duration`的关键作用；同时涵盖移动端兼容策略、多标签页/频繁操作下的幂等校验、Referer与IP后端防护等实战要点，为构建精准、健壮、可落地的视频播放统计系统提供了一套完整技术路径。

视频播放次数该存在哪里

不能只靠前端变量计数，页面刷新就归零。必须把数据存到服务端，或者用 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_20240520，当天只记一次
• 后端接口需校验 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），长期运行要定期清理过期键

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。