原生 video 控件无法通过动态增删 controls 属性可靠隐藏，唯一稳定方案是初始不设 controls，用 JS + 自定义 UI 实现播放控制；controlslist 仅能禁用部分子功能且兼容性有限；iOS Safari 强制显示原生控件，需 playsinline + 用户手势触发 play()。
controls 属性不支持动态增删来切换控件显示
直接通过 video.controls = false 或移除 controls 属性，并不能可靠隐藏原生控件——浏览器会忽略 DOM 属性的删除，只要初始 HTML 里写了 controls，控件就一直存在。真正生效的是属性是否存在（boolean attribute），而不是它的值。
- 写
<video controls>或<video controls="true">效果一样，控件显示 - 写
<video>（完全不带controls）控件不显示 -
video.removeAttribute('controls')在多数浏览器中无效，控件仍显示 -
video.controls = false只在某些旧版本 Safari 有效，现代 Chrome/Firefox 忽略该赋值
想动态控制控件，必须用 CSS 遮盖 + 自定义逻辑
原生控件没有 API 支持运行时开关，唯一稳定方案是：初始不加 controls，自己用 JS 实现播放/暂停/进度条等，并用 CSS 控制显隐。若只是临时“隐藏”，可用 display: none 或 opacity: 0 覆盖 .video::-webkit-media-controls，但兼容性差且不可靠。
- Chrome 中可尝试
video::-webkit-media-controls，但它是非标准伪元素，Firefox/Edge 不支持 -
video { pointer-events: none }会禁用所有交互，包括自定义按钮点击 - 推荐做法：初始写
<video>，用video.play()/pause()和video.currentTime搭配自定义 UI - 若需“默认显示、点击后隐藏”，监听
click后用video.style.cssText = 'controls: none;'无用，只能切自定义 UI
controlslist 属性能禁用部分控件，但支持度有限
controlslist 是个补充属性，可禁用下载、全屏、画中画等子功能，但它不能关闭整个控件栏，且仅 Chromium 系和新版 Edge 支持。
- 写
<video controls controlslist="nodownload nofullscreen noremoteplayback"> -
noplaybackrate可隐藏倍速按钮（Chrome 78+） -
nofullscreen在 iOS Safari 上无效 - 即使设了全部选项，播放/暂停/进度条仍保留，控件栏不会消失
移动端特别注意：iOS Safari 强制显示原生控件
iOS Safari 下，只要视频有 playsinline 且未设 webkit-playsinline，或用户触发了播放，系统就会强制唤起原生控件——哪怕你没写 controls，哪怕用了 CSS 隐藏，它仍可能在点击时弹出。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
<video playsinline webkit-playsinline> - 调用
video.play()前确保是用户手势触发（如click事件内），否则 iOS 会静音且控件行为异常 - Android Chrome 对
controls的控制更自由，但 WebView 版本差异大，建议统一走自定义控件路径
controls 上反复试探；要可控，就得放弃原生控件，从头搭一套轻量 UI。最易被忽略的点是：iOS 的“用户手势”要求不是可选条件，而是硬性拦截逻辑——没它，play() 失败，自定义按钮也点不动。 
