controls 是布尔属性，只需写 即可启用浏览器默认控件；若不显示，多因视频源错误、mime 类型不匹配、cors 问题或 file:// 协议限制；自定义控件需移除 controls 并手动控制。
controls 属性直接写在 <video></video> 标签里就行
加 controls 就是让浏览器显示默认的播放、暂停、音量、进度条等控件，不用自己写 JS 或 CSS。它是个布尔属性，只要存在就生效，值写不写都一样。
-
controls写成<video controls></video>最常用，也最稳妥 - 别写成
<video controls="true"></video>或<video controls="false"></video>—— 浏览器只认有没有这个属性，不解析它的值 - 如果用了
controls，但页面上还是没控件，大概率是视频源出问题（比如src路径错、MIME 类型不支持、跨域没配 CORS）
为什么加了 controls 还不显示？常见卡点
不是属性没加对，而是底层条件没满足。浏览器即使看到 controls，也会检查视频能否实际加载和解码。
-
src指向的文件 404 或返回非视频响应（比如 HTML 页面）→ 控件灰掉或不出现 - 用
<source></source>标签时，所有type值写错（如写成type="video/mp4"但实际是 AV1 编码）→ Chrome 可能拒绝加载，控件失效 - 本地开发时双击打开 HTML 文件（
file://协议），某些浏览器（尤其 Safari）会因安全策略禁用controls→ 改用本地服务器（如python3 -m http.server）
想自定义控件？先关掉 controls
一旦加了 controls，浏览器控件就会接管全部交互逻辑，你再用 JS 调 play()、监听 timeupdate 也没法隐藏或覆盖它。真要自定义，必须删掉 controls 属性。
- 删掉
controls后，用video.play()、video.currentTime、video.volume手动控制 - 需要监听事件：比如
video.addEventListener('loadedmetadata', ...)确保元数据就绪后再操作进度条 - 注意：iOS Safari 默认禁止自动播放且不触发
play()的 Promise resolve，得靠用户手势（如点击按钮）触发播放
移动端特别注意：controlslist 能隐藏部分按钮
Chrome 和 Edge 支持 controlslist 属性，可隐藏下载、全屏、字幕等按钮，但它只是“建议”，不强制生效，且 Safari 完全不支持。
- 隐藏下载按钮：
<video controls controlslist="nodownload"></video> - 隐藏全屏按钮：
<video controls controlslist="nofullscreen"></video> - 组合写法：
controlslist="nodownload nofullscreen noremoteplayback" - 别指望它在 iOS 上起作用——Safari 忽略该属性，且自带控件布局固定
controls 是个开关，不是万能钥匙。它开得容易，关得麻烦；开了未必能用，关了就得自己扛整套交互逻辑。真要精细控制，得从视频加载状态、设备兼容性、用户手势这几个点一层层往下摸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
