controls属性存在即显示，删掉才隐藏；controlslist仅提示禁用个别按钮，无法隐藏控制条；css伪元素和样式无效；彻底移除后需手动实现全部交互逻辑。
controls属性存在即显示，删掉才隐藏
HTML里controls是布尔属性，不是开关按钮——它不看值，只看“有没有”。只要标签里写了controls（哪怕写成controls=""、controls="false"），浏览器就一定渲染原生控制条。真正有效的隐藏方式只有一个：从HTML中彻底删除这个属性。
常见错误包括：
- 误以为
<video controls="false"></video>能关闭控制条 → 实际仍显示 - 用
video.setAttribute('controls', 'false')动态设置 → 属性仍存在，控件照常出现 - 依赖
video.controls = false→ 该DOM属性只读，赋值无效，且始终返回true
正确做法：
- 静态写法：
<video src="demo.mp4" autoplay muted></video>（不带controls） - JS动态移除：
videoEl.removeAttribute('controls') - 检查是否生效：
videoEl.hasAttribute('controls')比videoEl.controls更可靠
controlslist不能隐藏控制条，只能提示性禁用个别按钮
controlslist不是隐藏开关，而是向浏览器“提请求”的提示属性。它必须和controls共存才有意义，且仅在Chromium系（Chrome/Edge）部分生效；Firefox基本忽略，Safari支持极弱。
合法值只有三个："nodownload"、"nofullscreen"、"noremoteplayback"。即使全写上：controlslist="nodownload nofullscreen noremoteplayback"，播放/暂停、音量、进度条等核心控件依然显示。
关键限制：
- 非HTTPS环境（如
file://或HTTP非localhost）下，Chrome直接禁用controlslist能力，控制台会报警告 - 右键菜单里的“另存为视频”不受影响，
controlslist只管右下角下载按钮 - 无法隐藏
::-webkit-media-controls-overflow-button或画中画按钮
CSS伪元素不能可靠隐藏，z-index和pointer-events都失效
浏览器原生控制条渲染在Shadow DOM中，层级极高。z-index、display: none、visibility: hidden对它无效；pointer-events: none会同时禁掉所有用户交互（包括点击播放）。
唯一可尝试的CSS辅助手段是视觉裁剪：
- 外层容器设
overflow: hidden，配合height和object-fit: cover避免底部留白暴露控件区域 - 旧版Safari可能残留2px灰线，可用
margin-bottom: -2px微调 -
::-webkit-media-controls系列伪元素（如::-webkit-media-controls-play-button）版本一更新就失效，且破坏可访问性
别指望CSS“盖住”或“屏蔽”——控制条一旦被注入，样式层就基本失控了。
彻底隐藏后，所有交互必须手动补全
移除controls后，<video></video>变成纯媒体容器：没有默认点击播放、不能拖进度、静音切换失效、键盘空格键也不响应。这不是“隐藏UI”，而是“交出控制权”。
若需保留基础交互，必须手写逻辑：
- 播放/暂停：绑定
click事件，调用video.play()/video.pause()（iOS需用户手势触发） - 进度拖拽：监听
timeupdate同步UI，用input事件（非change）实时设置video.currentTime - 音量控制：
video.muted = true才可靠，video.volume在iOS上只读 - 状态管理：别依赖
video.paused，显式维护isPlaying变量并同步UI
最容易被忽略的是：控件“不可见” ≠ 视频“可交互”。资源加载失败、MIME类型错误、CORS拦截、iOS缺少手势，都会导致点击无反应——先确认video.readyState >= 2和video.networkState === 1，再谈隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
