真正稳定、可维护的做法是彻底弃用原生 controls，用 HTML+CSS 重绘界面层并由 JS 驱动逻辑：先移除 controls 属性并设置 playsinline 等属性确保内联播放；再用 div 包裹 video 构建定位容器；接着用标准 HTML 元素（button、input）实现控件并 CSS 美化；最后动态处理遮挡与平台差异。
不能靠 CSS 直接“覆盖”原生控件的外观——浏览器原生 video controls 是黑盒渲染，伪元素支持极不统一，强行用 ::-webkit-media-controls 类选择器不仅兼容性差（仅限部分 Chrome/Safari），还容易在 iOS 或 X5 内核中失效甚至触发全屏劫持。真正稳定、可维护的做法是：彻底弃用原生 controls，用 HTML + CSS 重绘界面层，再由 JS 驱动逻辑。
第一步：移除原生控件并确保内联播放
这是所有自定义的前提。不加这步，后续样式全是徒劳：
- 必须删掉
controls属性，否则浏览器可能忽略你的自定义结构或强制接管 UI - iOS Safari 和微信 WebView 要求
playsinline+webkit-playsinline="true"，否则点播即全屏 - 安卓 X5 内核（微信、QQ、UC）需加
x5-video-player-type="h5-page"，禁用x5-playsinline（它实际会让视频更易置顶） - 示例写法：
<video id="player" src="video.mp4" autoplay muted playsinline webkit-playsinline x5-video-player-type="h5-page"></video>
第二步：用 div 包裹构建可控容器
原生 video 标签本身无法精确定位按钮，必须套一层语义化容器：
- 外层
<div class="video-player">设为position: relative，作为所有控件的定位上下文 - video 元素设为
width: 100%; height: 100%; object-fit: cover;，避免拉伸变形 - 把播放/暂停、进度条、音量、全屏等按钮全部写在该 div 内，用绝对定位压在 video 上方
- 这样所有元素都在 DOM 层叠上下文中，
z-index才真正生效
第三步：用标准 HTML 元素实现控件，CSS 美化不依赖伪类
别碰 ::-webkit-media-controls-xxx —— 它们不是规范，且在 Firefox、旧版 Edge、X5 中基本无效：
立即学习“前端免费学习笔记（深入）”；
- 播放按钮用
<button class="play-btn"></button>，背景用 SVG 内联或 base64 图标 - 进度条用
<input type="range" class="progress-bar">，触控友好、无需 polyfill - 音量、全屏等也用 button + icon font / SVG，统一控制尺寸、圆角、透明度和过渡动画
- 推荐用 CSS 自定义属性管理主题色：
.play-btn { background-color: var(--primary, #3a86ff); border-radius: 50%; width: 40px; height: 40px; }
第四步：动态处理遮挡与平台差异
即使结构干净，移动端仍可能因 video 渲染层问题被弹窗、输入框盖住：
- 打开弹窗前执行
video.style.display = 'none'，关闭后恢复；不用visibility: hidden（仍占位） - uni-app 或跨端项目中，
<cover-view>在 H5 下无效，必须用 JS 判断平台做显隐切换 - 资源路径必须同域，跨域 poster 或 src 会触发 X5 强制全屏，所有样式设置归零
- 避免在 video 父容器上使用
transform、will-change或overflow: hidden，它们会创建新层叠上下文，干扰控件定位
