HTML的controls属性仅是布尔开关，不提供CSS样式控制能力；浏览器原生控件不在DOM中或仅部分暴露，无法统一样式；跨浏览器一致方案是禁用controls并手动实现UI。
controls属性本身不提供CSS样式控制能力
HTML的controls属性只是布尔开关，告诉浏览器“请渲染原生控件”，它不暴露任何CSS类名、伪元素或可样式化钩子。Chrome、Firefox、Safari各自用私有内部机制实现播放/暂停按钮、进度条、音量滑块——这些控件不在DOM中（或仅部分暴露），无法用input[type="range"]那种方式统一重置。
常见错误是试图写video::-webkit-media-controls或video::part(scrubber)去覆盖所有浏览器，但：Firefox不支持::-moz-媒体伪元素；Safari对::part()支持有限且不兼容Chrome的命名；IE/Edge旧版根本无此类API。
统一视觉的唯一可靠路径：禁用controls + 手动实现UI
真正跨浏览器一致的方案，是主动移除controls属性，用<button>、<input type="range">、<div>等标准元素重建控件，并通过JS绑定play()、currentTime、volume等API。
- 进度条必须用
<input type="range">而非<progress>——后者在iOS Safari中不可拖动，且无法精确同步currentTime - 播放/暂停按钮需监听
paused属性切换图标，不能只靠data-state类名——Safari可能延迟触发pause事件 - 全屏逻辑必须区分平台：
video.requestFullscreen()在iOS需包裹在用户手势回调内，Android可直接调用 - 音量滑块要处理
muted状态优先级高于volume值，否则静音后拖动滑块会意外取消静音
若必须保留原生controls，只能做最小化适配
当项目不允许自定义控件（如合规要求保留原生无障碍功能），就只能接受浏览器差异，仅做三处可控干预：
立即学习“前端免费学习笔记（深入）”；
- 用
controlslist="nodownload noremoteplayback"隐藏下载和投屏按钮——注意nofullscreen在Safari完全无效 - 通过
video::-webkit-media-controls-panel设透明背景+固定高度，避免Chrome默认面板遮挡字幕 - 给
video元素设width: 100%; height: auto;并配合object-fit: cover;，防止Firefox在缩放时拉伸控件区域
别碰::-webkit-media-controls-play-button之类选择器——它们随时可能被Chrome废弃，且Firefox/Safari无对应规则，维护成本远高于收益。
容易被忽略的移动端陷阱
iOS Safari强制要求首播必须由用户手势触发，即使autoplay + muted也无效；Android则允许静音自动播放。这意味着：如果依赖controls的“自动出现”行为，在iOS上用户首次点击播放前，控件根本不会渲染——你看到的是黑屏+无按钮，而不是“样式不一致”。
解决方案不是加CSS，而是提前在touchstart或click回调里调用video.load()，确保控件初始化完成。否则所有样式工作都建立在未渲染的DOM上，纯属白费。
