标签页切换时视频重置的本质是DOM重建或hidden误用导致媒体重载，应让播放器实例常驻并恢复状态；推荐用hidden属性保活video，配合visibilitychange监听实现currentTime持久化续播。
标签页切换时视频/音频重置，本质是 DOM 重建或 hidden 状态误用导致的媒体资源重载。核心解法不是“阻止重置”，而是让播放器实例始终存活、状态可恢复。
为什么切换后video会重置播放时间或暂停
常见错误是用 v-if、ngIf 或直接操作 display: none 控制面板显隐——这会让浏览器销毁并重建 video 元素，所有播放状态（currentTime、paused、缓冲进度）全部丢失。
-
hidden属性是安全的：它保留 DOM 实例，video会自动暂停但不销毁，切回时调play()可续播 -
visibility: hidden + opacity: 0也保留 DOM，但需手动管理播放状态（如切走前存currentTime，切回后恢复） -
display: none是最危险的：Safari 下甚至会持续后台加载，切回时强制重载，currentTime归零
用 hidden 属性保活 video 的最小改动
无需框架，纯 HTML/CSS/JS 即可生效。关键是把 hidden 当作语义化开关，而非视觉控制手段。
- 所有非活跃面板加
hidden属性：<div id="panel-video" hidden role="tabpanel"><video src="demo.mp4"></video></div> - CSS 中统一接管：
[hidden] { display: none; }（必须写，否则hidden不生效） - 切换 JS 只改属性：
document.querySelector('#panel-video').hidden = false，不碰video元素本身 - 首次加载时务必移除默认活跃面板的
hidden，否则白屏
需要跨标签页保持播放状态？得手动同步 currentTime
即使用了 hidden，用户切走再切回时，video.paused 仍为 true（浏览器焦点策略），但 currentTime 是保留的。若要“无缝续播”，需监听 visibility 变化：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 切走前（
document.hidden === true）缓存当前时间：localStorage.setItem('video-time', video.currentTime) - 切回后（
document.visibilityState === 'visible'）恢复并尝试播放：video.currentTime = parseFloat(localStorage.getItem('video-time') || '0'); video.play().catch(() => {}) - 注意 iOS/微信等环境：首次播放必须由用户手势触发，所以自动
play()可能失败，建议加一个“继续播放”按钮
iframe 里的播放器怎么不重置
如果视频在 iframe 中（比如嵌入 YouTube 或自建播放页），标签页切换时 iframe 本身可能被卸载或重载。此时不能依赖父页面的 hidden，而要让子页面自己持久化状态：
- 子页面（iframe 内容）监听
visibilitychange，将currentTime存入localStorage（同域前提下） - 子页面加载时检查
localStorage，有值则跳转到对应时间点 - 若 iframe 跨域，只能靠 URL 参数传递时间点，例如：
src="player.html?time=123"
真正难的不是“不让重置”，而是判断哪些状态必须保留（currentTime、音量、字幕选择）、哪些可以丢弃（缓冲区、解码上下文）。多数场景下，只同步 currentTime + 用户手动点击播放，就已足够自然。其他逻辑越复杂，越容易在 Safari 或 WebView 中失效。
