必须禁用原生controls并手写UI：移除controls属性，用HTML+CSS绘制控件，JS绑定播放/暂停、进度条等行为；iOS需加playsInline及x5属性；进度条要用input[type="range"]并防抖同步。
直接用CSS覆盖video原生控件行不通
HTML5 <video> 的原生 controls 是浏览器内置实现，Chrome、Safari、Firefox 各自用 Shadow DOM 封装了进度条、按钮等结构，且不开放 CSS 选择器访问。你写 .video::-webkit-media-controls 这类伪元素在部分 Chrome 版本可能临时生效，但 Safari（尤其 iOS）完全不支持，Firefox 从 69+ 起已移除所有 ::-moz- 媒体伪类。强行依赖这些选择器，上线后大概率在某个机型或系统版本上失效。
必须禁用原生controls并手写UI
这是唯一稳定跨端的方案：移除 controls 属性，用 HTML + CSS 画按钮/滑块，再用 JS 绑定行为。关键点包括：
-
<video controls={false}>或直接不写controls属性，否则自定义按钮和原生控件会重叠或触发冲突事件 - 播放/暂停按钮需监听
click，调用video.play()/video.pause()；iOS 要求用户手势触发，不能在 onload 或定时器里自动调用 - 进度条推荐用
<input type="range" min="0" max="1" step="0.001">，比手动画 div 更可靠——触控响应好、无障碍支持完善、无需处理拖拽坐标换算 - 首次获取
video.duration时可能为NaN，必须等loadedmetadata事件后再初始化滑块值和时间显示
iOS Safari 的 playsInline 是硬性前提
不加 playsinline（以及兼容的 webkit-playsinline、x5-video-player-fullscreen="true"），iOS 会强制全屏并接管 UI，你的自定义控件直接不可见。这个属性不是可选项，是保底条件：
<video
ref={videoRef}
src={src}
poster={poster}
playsInline
webkit-playsinline
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
/>
注意：仅加 playsinline 不够，微信、QQ、抖音内嵌 WebView 对 video 行为有额外限制，x5 属性是腾讯系环境必需。
立即学习“前端免费学习笔记（深入）”；
进度条同步要防抖+防跳变
timeupdate 事件在播放中高频触发（每 200–250ms 一次），若每次直接更新 input.value = currentTime / duration，会导致滑块“卡顿”或“回弹”。真实项目中应：
- 用
requestAnimationFrame节流更新 UI，避免 layout thrashing - 拖动时暂停
timeupdate监听，防止用户拖动过程中视频时间被自动覆盖 - 拖动结束（
input的change事件）再恢复监听，并校准currentTime - 对
duration做缓存，避免反复读取返回NaN或突变值（如 HLS 切片加载中）
最易被忽略的是：移动端 touchmove 比 mousemove 更敏感，input[type="range"] 在 iOS 上默认有延迟，需加 touch-action: manipulation 优化响应。
