隐藏视频却不中断播放的最小安全方案是使用 position: absolute + inset: -9999px 将视频移出视口，同时保留其在 Grid 中的网格项位置；避免 display: none 或 visibility: hidden 导致暂停播放。
Grid布局中隐藏视频元素的常见错误
直接用 display: none 或 visibility: hidden 隐藏 元素，会导致其暂停播放、释放解码器资源，甚至触发 pause 事件——这在需要后台持续加载或音视频同步的场景下不可接受。
-
display: none：彻底移出渲染流，play()会失败，且多数浏览器拒绝自动播放策略 -
visibility: hidden：仍占布局空间，但画面不可见，音频可能继续播放（行为不一致，Chrome 和 Safari 处理不同） - 正确思路是「视觉隐藏但保持激活状态」：用
opacity: 0+pointer-events: none，同时确保它仍在 Grid 网格项中参与布局
用 grid-template-areas 精确控制多个视频位置
grid-template-areas 最适合语义化地分配多个 元素到固定区域，比如画中画、主屏+副屏、监控九宫格等场景。
- 每个
的容器需设置grid-area名称，与grid-template-areas中的字符串一一对应 - 行内换行用引号包裹，空格分隔列，换行符分隔行；缺失位置用
.占位 - 注意：
grid-area必须写在子元素上（即 video 的父容器），不能直接写在上（部分浏览器不支持）
.container {
display: grid;
grid-template-areas:
"main main side"
"main main side"
"foot foot foot";
}
.video-main { grid-area: main; }
.video-side { grid-area: side; }
.video-foot { grid-area: foot; }
动态切换视频显示位置时避免重排和卡顿
用 JS 切换 grid-area 值本身开销极小，但若频繁修改（如拖拽换位、焦点高亮），要注意：
- 不要每次切换都重新设置整个
grid-template-areas，只改子元素的grid-area - 避免在循环中连续读取
offsetTop或getBoundingClientRect()，否则强制同步布局 - 若需淡入/淡出效果，统一用
opacity+transition，不要混用transform: scale(0)（可能触发 video texture 重载） - 移动端注意：iOS Safari 对
grid-area动态变更响应较慢，建议加will-change: grid-area提前提示合成器
隐藏视频却不中断播放的最小安全方案
核心是让元素「不可见、不可点、不占视觉空间，但保持 layout flow 和媒体状态」：
立即学习“前端免费学习笔记（深入）”；
- 使用
position: absolute+inset: -9999px将视频移出视口（比clip-path兼容性更好） - 同时保留其在 Grid 中的网格项位置（即不删 DOM，也不设
display: none） - 若必须用
opacity: 0，请确保父容器未设置overflow: hidden，否则某些 Android WebView 会误判为离屏而卸载视频纹理
.video-hidden {
opacity: 0;
pointer-events: none;
/* 不要加 transform 或 filter，它们可能触发新层并中断硬件加速 */
}
Grid 本身不干预媒体行为，真正容易被忽略的是：视频是否还在文档流里、是否还能响应 loadeddata 或 timeupdate。只要没被 display: none 或从 DOM 移除，它就还在「活着」。
