视频播放次数必须存服务端或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_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），长期运行要定期清理过期键
duration 不可用」和「移动端无法触发 ended」，这两点不处理，统计基本不准。 
