精准统计视频有效时长与完播率需基于状态机建模：过滤拖拽、暂停、后台、广告等无效行为，用performance.now()记录连续有效段，完播率按用户级去重并校验ended与currentTime容错，实时上报+本地缓存防丢失。
要精准统计用户观看视频的总有效时长与完播率，核心不是简单监听 timeupdate 或累加播放时间，而是需过滤无效行为（如拖拽、暂停、后台播放、自动跳过广告等），并结合用户真实参与意图建模。HTML5 <video> 提供的原生事件 + 合理的状态管理是关键。
一、定义“有效观看时长”的业务逻辑
有效时长 ≠ 视频播放器显示的累计播放秒数。它应排除：
- 用户手动拖拽跳过的片段（例如从 0:10 拖到 2:30，中间 2:20 不计入）
- 暂停期间的时间（即使
video.paused === false但实际卡顿或 buffer 中断） - 页面不可见时（
document.hidden === true）的播放 - 静音+小窗+画中画等低参与状态（可选，按产品需求启用）
- 广告时段（如有 VAST/IMA 集成，需单独标记广告时间段）
建议用「连续有效播放段」方式记录：每次从 play 触发且页面可见、未拖拽、未暂停开始计时，遇到 pause、seeking、visibilitychange 或 ended 就结束当前段，存入数组。
二、监听关键事件并维护播放状态
在 video 元素上绑定以下事件，配合时间戳和状态变量：
立即学习“Java免费学习笔记（深入）”；
-
play：记录lastPlayStart = performance.now()，同时检查!video.paused && !document.hidden && !video.seeking -
pause/seeking/ended：计算本次有效段时长：(performance.now() - lastPlayStart) / 1000（转为秒），只在满足有效条件时累加 -
timeupdate：不直接用于统计，仅作辅助（如防卡顿检测：若两次触发间隔 > 1s 且video.currentTime未变，视为卡顿，暂停计时） -
visibilitychange：页面隐藏时立即暂停计时；显示时若仍在播放且未 seeking，可恢复计时（需判断是否被用户主动切走） -
ratechange：处理倍速变化（如 2x 播放，实际耗时减半，但有效时长仍按视频时间轴算，即 1 秒播放 = 1 秒有效）
注意：所有时间用 performance.now() 而非 Date.now()，避免系统时间校准干扰。
三、计算完播率的可靠方式
完播率 = 「真正看到结尾的独立用户数」 ÷ 「播放过该视频的独立用户数」，不是「播放完成次数 / 总播放次数」。需区分：
-
单次播放是否完播：当
video.ended === true且video.currentTime >= video.duration * 0.98（容错 2%，防因精度或加载尾部丢失导致误判） - 用户级完播：同一用户（可用 localStorage 或 UUID 标识）对同一视频只记一次完播，避免重复刷数据
- 防作弊机制：若某次播放中有效时长 4x，或 seek 行为过于频繁（如 10 秒内 seek ≥ 3 次），可标记为异常，不计入分母或分子
完播事件应在 ended 触发后立即校验，并结合本地缓存（如 localStorage.setItem('video_v123_complete', '1')）去重。
四、上报策略与容错设计
不要等到页面卸载才上报，避免丢失数据：
- 每 15–30 秒主动上报一次当前累计有效时长（含 videoId、sessionId、userId、durationSec）
- 监听
beforeunload和pagehide，上报最终值 + 是否完播 - 使用
navigator.sendBeacon()发送终止数据，确保即使页面关闭也能发出请求 - 前端本地缓存未上报数据（IndexedDB 或 localStorage），下次进入页面时补传
服务端需做幂等处理（用 sessionId + timestamp 去重），并支持按设备、浏览器、网络类型多维归因分析。
不复杂但容易忽略的是状态同步与边界条件——比如用户切 Tab 后又切回、视频加载失败自动重试、移动端锁屏唤醒等场景，都要在事件流中显式处理。把「用户真实看了多久」还原出来，靠的是严谨的状态机，而不是堆事件监听器。
