无法通过CSS统一样式化原生video控件，因浏览器未提供标准化样式钩子；应移除controls属性，用HTML/CSS/JS自定义控件，并处理muted/autoplay/playsinline及用户手势触发等兼容问题。
controls 属性本身无法统一样式
直接给 <video controls> 加 CSS 选择器（比如 video::-webkit-media-controls）只能覆盖部分浏览器，而且各厂商前缀和伪元素名差异极大：Chrome 用 ::-webkit-media-controls，Firefox 几乎不暴露可样式化接口，Safari 对 ::-webkit-media-controls 的支持又随版本波动。这不是“写得不够细”的问题，而是浏览器根本没提供标准化的样式钩子。
所以别试图靠 CSS 强行统一原生控件外观——它注定失败。真正可控的做法是移除 controls 属性，自己用 HTML + CSS + JS 构建控制栏。
自定义控件必须处理的三个兼容硬伤
自己造控件时，以下三点不处理，iOS 和旧版 Safari 就会卡住或静音失效：
-
muted必须显式加在<video>标签上，否则 iOS Safari 拒绝响应play()调用（哪怕用户点了播放按钮） -
playsinline必须存在，否则 iOS 默认全屏，且无法通过 JS 强制内联 - 所有播放操作（
play()、pause()、currentTime设置）必须由用户手势触发（如click、touchstart），不能在load或DOMContentLoaded里自动调用
进度条拖动在 Safari 上容易失灵
Safari 对 input[type="range"] 的 change 和 input 事件行为不一致：拖动时只触发 input，松手才触发 change；但 Chrome/Firefox 在拖动中持续触发 input。如果只监听 change，Safari 用户拖动过程就无响应。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 同时监听
input和change事件 - 拖动过程中用
video.currentTime = e.target.value实时跳转，而非等松手 - 为防 Safari 精度误差，设置后立刻读回
video.currentTime并同步到 range 的value，避免 UI 和实际位置脱节
移动端音量控制根本不可靠
Android Chrome 和 iOS Safari 都不允许 JS 修改 volume 属性（设了也无效），且原生控件里的音量滑块在移动端常被隐藏或禁用。强行实现音量调节 UI 只会让用户困惑。
更务实的做法：
- 音量按钮只做“静音切换”（
video.muted = !video.muted），这是所有平台都支持的 - 隐藏音量滑块，或仅在桌面端显示（用
@supports (pointer: fine)检测） - 不要尝试读取
video.volume—— 它在移动端始终返回 1，不代表真实音量状态
自定义控件不是把原生控件换套皮肤，而是放弃对原生行为的依赖，从事件流、状态同步、手势响应三方面重写逻辑。最容易被忽略的是：iOS 上任何播放操作必须绑定到用户主动触发的事件回调里，且 muted 属性不能靠 JS 动态添加，必须写死在 HTML 标签中。
