controls 属性在不同浏览器中外观不一致，因其由各浏览器原生实现且不受标准 CSS 控制；Chrome、Firefox、Safari、Edge 渲染逻辑独立，导致按钮尺寸、圆角、图标、颜色等全不统一，私有伪元素兼容性差且易废弃。
controls 属性为什么在不同浏览器里长得不一样
因为 controls 是浏览器原生实现的，不是标准 CSS 可控的 UI 组件。Chrome、Firefox、Safari、Edge 各自维护一套渲染逻辑，按钮尺寸、圆角、图标、文字位置、颜色、hover/active 状态全都不统一。你没法用 input[type="range"] 那套思路去覆盖它——私有伪元素（比如 ::-webkit-media-controls-play-button）只在部分引擎生效，且随时可能被废弃。
加了 controls 却没显示控件？先查这三件事
常见静默失败场景：
-
src为空或路径 404，浏览器不报错但控件灰掉不可点 - 没写
width和height，尤其 Safari 和 Firefox 在尺寸为 0 时直接隐藏整个控件区域 - 用了
<video controls />自闭合写法，HTML 规范不认，Safari 会忽略controls
正确写法必须是 <video src="x.mp4" controls></video> 或带 <source> 子节点的闭合结构。
想统一外观？别修 controls，直接关掉它
只要设计稿对播放器有任何一句“要和品牌色一致”“进度条要细一点”“暂停图标换成 SVG”，就该立刻放弃 controls。原因很实在：
立即学习“前端免费学习笔记（深入）”；
- 跨浏览器样式修复成本远高于重写一套 JS 控制条
- 移动端（尤其是 iOS）的原生控件无法响应
pointer-events: none，盖一层 div 会拦截点击 - 无障碍支持（如键盘 Tab、aria-*）反而更难补全，原生控件的语义是黑盒
真实项目中的做法：删掉 controls，用 video.play()、video.currentTime、video.volume 等 API 搭配自定义 DOM 元素做交互，再手动加 role="slider"、aria-valuenow 等属性。
保留 controls 仅用于降级兜底时要注意什么
少数场景（比如 CMS 后台预览、内部工具页）确实可以留着 controls，但得接受它的不可控性，并做最小防御：
- 必须搭配
preload="metadata"，否则 Safari 可能等不到元数据就卡住控件初始化 - 务必提供至少两个
<source>，且每个都带type，例如<source src="v.mp4" type="video/mp4">+<source src="v.webm" type="video/webm">；iOS 完全不请求 webm，但 Chrome/Firefox 会 fallback，缺一不可 - 如果视频带字幕，
<track>的srclang和default缺一不可，否则 Safari 不显示字幕按钮
真正难处理的从来不是怎么让 controls 显示出来，而是它一旦显示，你就失去了对它的任何话语权——包括尺寸、状态反馈、焦点管理、甚至是否响应点击。
