controls不生效主因是拼写错误（如control）、资源加载失败（404/mime错误/编码不支持）或autoplay未配muted；原生控件不可css定制，需js自定义；多格式+preload="metadata"更可靠。
controls 属性不生效的常见原因
最直接的判断：写了 controls 却没出现播放条，大概率是拼写或加载问题。它是个布尔属性，只认 controls 这个完整单词，control（少一个 s）完全无效；也不需要写成 controls="true" 或 controls=""——虽然后者浏览器能识别，但属于冗余写法。
另外，控件不显示往往不是属性问题，而是视频资源根本没加载成功：Network 面板里看到 404 或 MIME 类型错误（比如服务器返回 text/plain 而不是 video/mp4），或者编码不被当前浏览器支持（如 HEVC 在部分旧版 Chrome 中失效），都会导致控件静默不渲染。
autoplay + controls 必须配 muted 才能真自动播放
Chrome、Safari 等主流浏览器对自动播放有严格策略：即使加了 autoplay 和 controls，若没加 muted，视频会卡在首帧，控制条虽显示，但点击“播放”按钮可能无响应或立即暂停。
-
<video src="a.mp4" autoplay muted controls></video>✅ 可靠触发自动播放 + 控制条可用 -
<video src="a.mp4" autoplay controls></video>❌ 大概率静音拦截，用户首次交互后才可能播放 - 移动端 Safari 更激进：即使
muted，也可能因页面未获用户手势焦点而拒绝 autoplay
controls 是原生控件，不是 CSS 可定制的 UI
加了 controls 就等于把控制权交给浏览器——进度条样式、音量滑块大小、全屏按钮位置，全部无法用 CSS 修改。Chrome、Firefox、Safari 渲染出的控件长得不一样，也没有统一类名可选。
如果需求是换皮肤、隐藏音量、只留播放/暂停按钮，必须关掉 controls，改用 JS 手动监听事件：
- 移除
controls属性 - 用
video.play()/video.pause()控制状态 - 监听
timeupdate更新自定义进度条值 - 绑定
input事件拖动时设置video.currentTime
注意：iOS Safari 要求所有 play() 调用必须由用户手势（如 click、touchend）触发，否则会抛出 NotAllowedError。
多格式兼容建议与 preload 配合使用
单靠 src 属性容易在某些浏览器中失败，尤其当只提供 MP4 时，Firefox 可能不播。正确做法是用 <source></source> 标签提供 fallback：
<video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </source></source></video>
preload 属性影响初始加载行为：preload="metadata"（推荐）只加载时长、封面等元信息，控件能快速出现；preload="auto" 可能触发大流量预加载，慎用于移动环境。
真正容易被忽略的是：控件是否显示，和视频是否能播，是两个独立问题。资源加载失败时，控件可能短暂出现又消失，或压根不渲染——得先确保 Network 和 MIME 正确，再调 UI。
