video标签页切换后currentTime不归零是浏览器正常行为，其值保持离开时位置但播放常被暂停；需监听visibilitychange事件，在切回且readyState≥2时手动设currentTime=0，避免直接调用play()触发拦截。
video 标签页切换后 currentTime 不归零？先看浏览器行为
Chrome、Firefox、Safari 在标签页切走再切回时，video.currentTime 值本身不会自动重置——它保持离开时的位置，但播放状态（paused）可能被浏览器暂停，导致视觉上“卡住”。这不是 bug，是规范允许的节电/资源管理策略。你不能依赖标签页可见性变化来“自动清进度”，必须手动干预。
监听页面可见性变化并重置 currentTime
用 document.visibilityState + visibilitychange 事件监听切页动作，但要注意：只在切回（visibilityState === 'visible'）且视频处于暂停状态时才重置，避免干扰正在播放的场景。
- 必须等
readyState >= 2（即元数据已加载）才能安全赋值currentTime = 0，否则无效或抛错 - 重置后要不要自动播放？一般不建议。用户切回来未必想立刻播，留白更符合直觉
- 如果视频正处在缓冲中（
readyState === 0或1），跳currentTime会被忽略，需加兜底逻辑（比如延时重试）
const video = document.getElementById('myVideo');
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible' && video.paused && video.readyState >= 2) {
video.currentTime = 0;
}
});
为什么直接监听 focus/blur 不可靠
window.focus 和 window.blur 在移动端基本失效，且在多标签页+PWA 场景下语义模糊（比如从地址栏切回也算 focus）。而 visibilitychange 是 W3C 标准事件，覆盖所有平台，且明确反映页面是否对用户“可见”。
- 别用
pagehide/pageshow：它们触发时机更晚，且pageshow的persisted属性不可靠，无法准确判断是否真从后台切回 - 不要在
visibilitychange里调用play()：多数浏览器会拦截非用户手势触发的播放，报NotAllowedError - 如果业务强要求“切回即播”，得配合用户最近一次交互时间戳做判断，但复杂度陡增，通常没必要
容易被忽略的兼容细节
部分旧版 Safari（≤15.6）在标签页切回时，即使 readyState >= 2，首次设置 currentTime 仍可能失败。稳妥做法是加一次 loadeddata 事件兜底，或用 setTimeout(..., 0) 微任务延迟赋值。
- 移动端 WebView（如微信内置浏览器）可能完全忽略
visibilitychange，需 fallback 到pagehide+ 定时检查document.hidden -
video.duration在切页前后可能变化（比如动态换源），重置前最好再校验一次isFinite(video.duration) - 如果用了
preload="none"，切回时视频可能还没加载元数据，currentTime = 0会静默失败——此时应先触发load()再监听loadedmetadata
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
