controls是布尔属性，JS只能通过移除或设为false来禁用，不能用CSS隐藏；需在视频加载前设置，否则可能失效；移除后需自行实现全部播放控制逻辑。
controls 属性是 HTML 原生的，JS 不能“隐藏”它，只能移除或禁用
很多人以为 controls 是个 CSS 可控的视觉属性，其实不是。controls 是一个布尔属性，只要存在（哪怕写成 controls="" 或 controls="false"），浏览器就会显示默认控件。JS 想让它“不出现”，唯一可靠方式是彻底移除该属性，而不是设为 false 或用 CSS 隐藏。
-
video.controls = false是有效的 JS 写法，它会移除controls属性（注意：不是隐藏 DOM 属性，而是同步更新属性状态） -
video.removeAttribute('controls')效果相同，但更底层，适合在属性被手动写死在 HTML 中时使用 - 千万别用
video.style.display = 'none'或video.controls.style.visibility = 'hidden'——controls不是 DOM 元素，没有 style 属性
什么时候设 controls = false 会失效？
常见于视频元素已加载并开始渲染后才执行 JS，尤其在 autoplay 或 preload="auto" 场景下。浏览器可能已根据初始 HTML 展开了控件 UI，此时再改 controls 属性不一定立即生效。
- 最佳时机：在
video元素插入 DOM 后、尚未触发loadstart或canplay前设置controls = false - 如果必须动态切换，建议配合
video.load()强制重载（但会中断当前播放、清空缓冲） - 某些 iOS Safari 版本对动态移除
controls支持不稳定，需测试真机
想完全自定义控件？别只动 controls，还得关掉原生行为
移除 controls 只是第一步。用户仍可能通过右键菜单、键盘快捷键（如空格暂停）、或系统级手势唤出控件（尤其在移动端）。要真正“接管”，得组合处理：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 加
disablePictureInPicture属性防止画中画按钮出现 - 监听
contextmenu并e.preventDefault()阻止右键菜单 - 用
video.setAttribute('webkit-playsinline', 'true')和playsinline避免全屏自动触发（iOS 关键） - 若用
controlslist="nodownload noremoteplayback"，注意兼容性：Chrome ≥ 74、Edge ≥ 79，Firefox 不支持
一个最小可行示例
<video id="myVideo" src="demo.mp4" controls></video>
<script>
const v = document.getElementById('myVideo');
// 必须在视频加载前执行
v.controls = false;
v.disablePictureInPicture = true;
v.addEventListener('contextmenu', e => e.preventDefault());
</script>
记住：controls = false 不是 CSS 显示开关，它改变的是浏览器是否渲染那套默认 UI 的决策逻辑。一旦你移除了它，所有播放控制都得自己实现 —— 这才是最常被低估的复杂点。
立即学习“前端免费学习笔记（深入）”；
