controls属性必须彻底移除而非设为false，因浏览器仅检测其存在与否；controlsList仅作提示且兼容性差；彻底隐藏需移除controls、用CSS伪元素清除残余按钮，并手动实现播放、拖拽、音量等全部交互逻辑。
controls 属性不能设为 false，必须彻底移除——写了就显示，删了才隐藏，没中间态。
为什么 controls="false" 完全无效？
浏览器只检测该属性是否存在，不解析它的值。哪怕你写成 controls="0"、controls="" 或 controls="nope"，只要属性在 DOM 里，控件就照常渲染。
- ✅ 正确写法：
<video src="a.mp4"></video>（压根不写controls） - ✅ 动态移除：
video.removeAttribute('controls') - ❌ 错误写法：
<video controls="false" src="a.mp4"></video>→ 控件仍出现
controlsList 能精准隐藏某个按钮吗？
不能。它只是向浏览器“提请求”，不是强制开关，且仅 Chromium 系列（Chrome/Edge）稳定支持；Firefox 基本忽略，Safari 支持极弱。
-
controlsList="noprogress nofullscreen"只会让进度条和全屏按钮“尽量消失”，但播放/暂停/音量按钮依然保留 - 即使加了
controlsList，只要controls属性还在，原生控件整体就存在 - 无法靠它隐藏 WebKit 下的
::-webkit-media-controls-overflow-button或画中画按钮
彻底隐藏后，用户点不了视频怎么办？
移除 controls 后，video 变成纯容器：没有默认点击播放、不能拖进度、静音切换失效——所有交互必须手动补全。
立即学习“前端免费学习笔记（深入）”；
- 播放/暂停需绑定
click事件并调用video.play()/video.pause()（注意 iOS 需用户手势触发） - 进度拖拽要监听
timeupdate、自己画进度条、再赋值video.currentTime（iOS 上该赋值异步，可能延迟生效） -
video.volume在 iOS 是只读的，设了也无效；video.muted = true才可靠 - 别乱加
pointer-events: none—— 它会同时禁掉video.play()的点击触发能力
真正容易被忽略的，是“控件是否可见”和“视频能否交互”根本不是一回事：资源加载失败、MIME 类型错误、CORS 拦截、iOS 手势缺失，都会让控件“看起来在，实际点不动”。先确保 networkState === 1、readyState >= 2，再谈隐藏或自定义。
