video标签的controls是布尔属性，存在即显示原生控件，移除才隐藏；不能通过赋值false或setAttribut控制，须用removeAttribute；自定义控件时必须显式移除，iOS Safari还需配合muted等属性才能彻底隐藏。
controls 属性存在即启用，移除即隐藏
HTML 中 video 标签的 controls 是一个布尔属性，它的行为非常直接：只要写在标签里（无论值是 ""、"controls" 还是 "true"），浏览器就显示原生控制栏；一旦完全不写这个属性，控制栏就彻底不出现。它不接受 false 或 "false" 作为关闭方式——写了就是开，没写才是关。
常见错误是以为可以这样关掉：<video controls="false"></video>，结果控制栏照常显示，因为只要属性名存在，浏览器就按“真”处理。
-
<video controls></video>→ 显示播放/暂停、音量、进度条等 -
<video controls=""></video>→ 同样显示（空字符串仍算存在） -
<video controls="false"></video>→ 依然显示（任何值都无效，只看是否存在） -
<video></video>→ 完全不显示原生控件
用 JavaScript 动态切换 controls 的正确姿势
不能靠 element.controls = false 或 setAttribute("controls", "false") 来隐藏——前者赋值无效（controls 属性是只读的 DOM 属性），后者只是加了个无意义的字符串值，控制栏仍在。
真正有效的做法只有两个：添加或移除该属性本身。
- 显示控件：
videoEl.setAttribute("controls", "")或videoEl.controls = true（注意：这个true赋值在多数浏览器中可行，但本质是触发属性添加） - 隐藏控件：
videoEl.removeAttribute("controls")（唯一可靠方式） - 检查是否启用：
videoEl.hasAttribute("controls")比读videoEl.controls更准确，因为后者始终返回true（即使属性已被移除，该 DOM 属性仍为只读真值）
自定义控件时必须移除 controls 属性
如果你用 JS 实现播放/暂停按钮、进度拖拽、音量滑块等自定义 UI，却忘了去掉 controls 属性，就会出现原生控件和自定义控件同时存在、互相干扰的情况——比如点击自定义播放按钮后，原生暂停按钮立刻高亮，或者进度条响应两次拖拽。
这不是样式覆盖能解决的问题，必须从 HTML 层级清除该属性：
<video id="myVideo" poster="cover.jpg"><source src="video.mp4" type="video/mp4"></source></video>
然后在 JS 初始化时确认：myVideo.removeAttribute("controls")。哪怕你在 HTML 里没写 controls，也建议显式执行一次，避免后续代码误加。
移动端 Safari 的特殊表现
iOS Safari 对 controls 属性有额外限制：即使你用 JS 移除了 controls，只要视频是自动播放（autoplay）且未静音（muted 未设），它仍可能强制显示最小化控制栏（仅含播放按钮），这是系统级策略，无法通过 HTML 或 JS 规避。
若要彻底隐藏所有 UI，必须同时满足：autoplay + muted + playsinline + removeAttribute("controls")。漏掉 muted，iOS 就会回退到带控件的全屏播放模式。
另外，controlslist 属性（如 nodownload、nofullscreen）在 Safari 上支持度有限，不要依赖它来“微调”控件可见性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
