正确隐藏video元素应设width/height为0且opacity:0，保持其在渲染流中可播放；优先用audio标签处理纯音频，避免display:none或visibility:hidden导致停播。
用 display: none 或 visibility: hidden 隐藏
很多人第一反应是加 CSS 把视频元素藏起来，但实际中：display: none 会让浏览器主动暂停媒体播放，visibility: hidden 虽然保留播放状态，但在部分浏览器（如 Safari）里仍可能触发静音或中断音频流。这不是 bug，而是浏览器对“不可见媒体”的节能策略。
正确做法：用 width 和 height 缩到 0，同时保持 opacity: 0
让视频元素仍在文档流中、可渲染、可播放，只是人眼不可见。关键点在于不能脱离渲染流程，也不能被判定为“非活跃媒体”。
-
width和height设为0，避免占位但保留播放能力 - 加上
opacity: 0确保完全透明（某些浏览器对0x0元素仍有微弱渲染判断） - 必须保留
controls属性（如果需要手动控制），否则用户无法操作播放/暂停 - 不要加
preload="none"，否则首次点击播放可能有明显延迟
更稳妥的替代方案：直接用
如果原始资源本身就是音视频混合但你只想要声音，优先检查是否能提供纯音频格式（如 .mp3、.ogg）。HTML5 的 元素天生就是为纯音频设计的，无画面、无隐藏风险、兼容性更好。
- 服务器返回的 Content-Type 必须匹配（如
audio/mpeg对应.mp3） - 若只有
.mp4视频文件，可用 FFmpeg 提取音频：ffmpeg -i input.mp4 -vn -acodec copy output.mp3 - 移动端 iOS Safari 对自动播放限制极严，即使
autoplay+muted也无效，必须由用户手势触发play()
JavaScript 动态控制时注意 play() 的 Promise 返回
现代浏览器要求 play() 方法返回 Promise，失败时会 reject，不能只靠 try/catch 判断是否播成功。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
video.play()—— 可能静默失败 - 正确写法：
video.play().catch(e => console.warn("Playback failed:", e)); - 尤其在隐藏视频后调用
play()，Safari 和 Chrome 会因“无用户交互”拒绝播放，需绑定click或touchstart事件后再调用
