controls是布尔属性，仅需存在即生效，正确写法为<video src="a.mp4" controls></video>；拼错、赋值或依赖JS操作均无效，且必须移除属性才能禁用原生控件。
直接加 controls 属性就行，不写值、不拼错、不依赖 JS——写了就显示，删了就消失。
controls 属性怎么写才生效
它是个布尔属性，只看“有没有”，不看“是什么值”：
-
<video src="a.mp4" controls></video>✅ 正确，最简写法 -
<video src="a.mp4" controls=""></video>✅ 也行，但冗余 -
<video src="a.mp4" controls="true"></video>⚠️ 无效，浏览器仍当真，但语义错误 -
<video src="a.mp4" controls="false"></video>❌ 控制条照常出现——只要属性名存在，就是启用 -
<video src="a.mp4" control></video>❌ 少个s，完全无效（常见手误）
控制条不显示？先查这三件事
写了 controls 却看不到控件，大概率不是属性问题，而是资源或环境异常：
- 视频路径 404 或跨域：打开 DevTools → Network 标签页，看
networkState是否为0（NETWORK_EMPTY），说明根本没加载到资源 - MIME 类型错误：服务器返回的
Content-Type是text/plain而非video/mp4，Chrome 会拒绝解析并隐藏控件 - 编码不兼容：比如用了 H.265 编码的 MP4，在部分 Chrome 版本中无法软解，
canPlayType("video/mp4")可能返回""，导致控件仅显示一个播放按钮或空白
想用自定义 UI，必须移除 controls 属性
哪怕你只打算自己写个播放按钮，也得先干掉原生控件——否则两个控件共存，行为互相干扰：
立即学习“前端免费学习笔记（深入）”；
- 不能靠
videoEl.controls = false隐藏：该 DOM 属性是只读的，赋值无效 - 不能靠
videoEl.setAttribute("controls", "false")：只要属性名存在，控件就显示 - 唯一可靠方式：
videoEl.removeAttribute("controls") - 检查是否已移除？用
videoEl.hasAttribute("controls")，别信videoEl.controls（它永远返回true）
autoplay + controls 组合要注意 muted
在 Chrome、Safari 等主流浏览器中，autoplay 和 controls 同时存在时，若没加 muted，视频大概率静音且控件中的音量按钮不可操作：
-
<video src="a.mp4" autoplay controls></video>→ 多数情况下被拦截，或自动静音但用户点不了音量 -
<video src="a.mp4" autoplay muted controls></video>→ 自动播放 + 控件完整可用，用户可手动取消静音 - iOS Safari 更严格：即使
muted，也可能因页面未获用户交互而延迟播放，playsinline建议一并加上
真正容易被忽略的是：controls 不是“开关”，而是“契约”——它一旦存在，就交出全部控制权给浏览器；想拿回来，得从 HTML 层面彻底清除，而不是试图覆盖或禁用。
