controls属性是控制条显示的前提，controlslist仅在controls存在时生效，用于精简已渲染的控件按钮；它非开关而是“精简器”，常见值包括nodownload、nofullscreen、noremoteplayback，仅chromium系及ios safari 16.4+支持。
controls 属性是控制条显示的前提
没有 controls，controlslist 什么也干不了。它不是开关，只是“精简器”——必须先有控制条，才能决定删掉哪几个按钮。写法很简单：<video src="a.mp4" controls></video>，属性存在即生效，不要加 = 或值（比如 controls="true" 是冗余且易出错的）。漏写、拼错成 control（少个 s）是最常见的空白原因。
controlslist 能隐藏哪些按钮？怎么写
controlslist 只在 Chromium 系列（Chrome、Edge、新版 Opera）有效，Firefox 基本忽略，iOS Safari 16.4+ 才支持 nofullscreen。它接受空格分隔的字符串，常见可用值有：
-
nodownload：隐藏下载按钮（但不阻止右键另存为或网络面板提取） -
nofullscreen：隐藏全屏按钮（注意不是no-fullscreen，不能带连字符） -
noremoteplayback：隐藏投屏按钮（Cast / AirPlay 图标），同时禁用对应功能
示例：<video src="a.mp4" controls controlslist="nodownload nofullscreen"></video>。注意：它不提供“只留播放按钮”这种粒度，也不能隐藏进度条或音量滑块。
为什么写了 controlslist 却没反应
除了浏览器兼容性问题，以下情况会让 controlslist 形同虚设：
- 视频资源加载失败（
src404、CORS 拦截、MIME 类型错误如返回text/plain）→ 控制条压根不渲染，更别说精简 -
preload="none"且尚未触发播放 → Safari 等可能延迟加载元数据，控件暂不出现 - CSS 隐藏了整个
<video></video>（display: none、visibility: hidden）→ 控件不可见，但属性仍在 - 在 Shadow DOM 中使用时，样式隔离导致控件区域被裁剪或未挂载
验证是否生效最直接的方式：打开 Chrome DevTools → Elements 面板检查 <video></video> 元素是否确实带有 controlslist 属性，并观察控件栏是否少了对应按钮。
想彻底隐藏某类控件？别指望 controlslist
controlslist 不提供功能级禁用，只影响 UI 显示。比如 nodownload 隐藏按钮，但用户仍可通过开发者工具或网络面板拿到视频地址；noremoteplayback 虽禁用投屏功能，但不影响其他 API 调用。
真正要屏蔽功能，得靠服务端策略（如签名 URL、Referer 校验）或 JS 层拦截（监听 contextmenu、禁用右键、覆盖 download 属性）。而如果目标是“完全自定义 UI”，唯一可靠路径是移除 controls，用 play()、currentTime、volume 等 API + 自绘按钮实现——此时 controlslist 就毫无意义了。
容易被忽略的是：控件是否可见，取决于资源加载状态和平台策略，而不是属性有没有写对。写了 controls 和 controlslist，不代表用户一定能点、能拖、能调音量——底层加载失败或 iOS 手势缺失，照样让控制条“形同虚设”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
