controls 属性存在即启用默认控制条，不接受值；若不可见，主因是资源加载失败、MIME 类型错误、preload="none"、CSS 隐藏、Shadow DOM 裁剪或 iOS 用户手势缺失；controlslist 仅精简按钮，不能替代 controls。
controls 属性只要出现在 标签中，浏览器就会渲染默认控制条——播放/暂停、进度条、音量、全屏等按钮全都有。它不接受值，不是开关配置项，更不是“设成 true 才生效”。
为什么写了 controls 却看不到控制条？
常见原因不是属性写错了，而是底层加载或环境限制挡住了它：
-
src缺失、路径 404 或 MIME 类型错误（比如服务器返回text/plain而不是video/mp4） -
preload="none"且尚未触发播放，Safari 等浏览器可能延迟渲染控件，直到元数据加载完成 - CSS 中设置了
display: none、visibility: hidden或opacity: 0，整个元素不可见，控件自然也不见 - 在 Shadow DOM 或 Web Component 内使用时，样式隔离导致控件区域被裁剪或未渲染
- iOS Safari 下：没加
playsinline且未发生用户手势（如点击），控件可能被策略性隐藏（即使 DOM 里存在）
controlslist 能替代 controls 吗？
不能。controlslist 必须和 controls 同时存在才起作用，它只负责“精简控件里的按钮”，不是“开关控件本身”：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
controlslist="nodownload nofullscreen"→ 下载和全屏按钮消失，但播放/暂停、进度条、音量滑块照常显示 -
controlslist="noremoteplayback"→ 投屏按钮隐藏，仅对 Chromecast / AirPlay 生效 - Firefox 基本忽略所有
controlslist值（截至 v128） - 安卓 WebView 中
nodownload多数无效；iOS Safari 16.4+ 才开始支持nofullscreen
想彻底隐藏控制条，只靠 HTML 不行
唯一可靠方式是移除 controls 属性，改用 JavaScript 主动控制：
- 去掉
controls，否则原生控件一定出现（controlslist无法覆盖这个前提） - 监听
loadedmetadata事件，确保元数据加载完成后再调用play()或绑定 UI 逻辑 - 用
video.play()、video.pause()、video.currentTime、video.volume等 API 实现功能 - 若需 UI，自己画按钮和进度条，再通过
input[type="range"]的change或input事件同步currentTime - 注意移动端限制：iOS 需
autoplay muted playsinline或用户首次交互后才能有声播放
真正容易被忽略的点是：控件是否显示，controls 只管“要不要画出来”，不管“能不能播”。资源加载失败、CORS 拦截、MIME 错误、iOS 手势策略，这些都会让控件“空有其表”——看着在，点不了，拖不动，甚至压根不响应。调试时先看 Network 面板里视频请求是否 200，再查控制台有没有 MediaError 或 CORS 报错，比反复改 HTML 属性有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
