video默认控件无法跨浏览器CSS美化，应禁用原生controls，用JS+自定义DOM实现：监听loadedmetadata设range.max，timeupdate更新range.value，iOS需降级音量为静音开关，并确保键盘无障碍支持。
video 元素默认控制条无法用 CSS 直接美化
浏览器对 <video> 内置控件（播放/暂停、进度条、音量等）的样式控制极其有限，appearance: none 或伪元素如 ::-webkit-media-controls 只在部分 Chrome/Edge 有效，且不稳定、无标准、不跨浏览器。强行依赖这些，上线后大概率在 Safari 或 Firefox 里完全失效。
真正可控的做法是：隐藏原生控件，用 JS + 自定义 DOM + CSS 重写整套 UI。
- 设置
controls="false"或移除该属性，禁用原生控件 - 手动添加
<button>、<input type="range">、<div>等元素构建 UI - 用
video.play()、video.currentTime、video.volume等 API 绑定交互逻辑 - 监听
timeupdate、loadedmetadata、ended等事件同步状态
自定义进度条必须监听 timeupdate 并手动更新
仅靠 CSS 设置 input[type="range"] 的 value 属性不会自动随播放推进变化；必须靠 JS 实时读取 video.currentTime 和 video.duration 计算比例并赋值给 range 的 value。
常见错误是只在播放开始时设一次，或者漏掉 loadedmetadata 事件导致初始 duration 为 0，range 滑块卡死在起点。
立即学习“前端免费学习笔记（深入）”；
- 务必在
loadedmetadata后初始化range.max = video.duration - 在
timeupdate中执行range.value = video.currentTime - 为避免抖动，可加
requestAnimationFrame节流，但多数场景直接赋值足够 - Safari 对
input[type="range"]的拖拽反馈有延迟，建议加video.pause()+video.currentTime = newValue响应input事件
音量控制在 iOS Safari 上受限于系统策略
iOS Safari 禁止 JS 主动设置音量（video.volume = 0.5 无效），且静音状态只能由用户手势触发。这意味着你做的音量滑块在 iPhone 上拖动可能完全没反应，甚至 video.muted 切换也会被忽略，除非发生在用户点击/触摸回调中。
- 检测
video.volume是否可写：尝试赋值后读回，若不变则说明被限制 - 优先使用
video.muted = true/false控制静音，它在 iOS 上更可靠 - 音量滑块 UI 可保留，但逻辑上降级为“静音开关+提示文案”，避免让用户误以为能调具体数值
- 不要在
autoplay场景下试图默认开声——iOS 会强制静音，且不触发canplay后的音量恢复
自定义控件需处理键盘与无障碍访问
纯鼠标操作的控件在键盘导航或屏幕阅读器下基本不可用。比如用 <div> 做播放按钮，按 Tab 键无法聚焦，Enter 也不触发播放。
- 所有可交互元素必须是语义化 HTML：
<button>代替<div>，<input type="range">本身支持键盘（方向键、PageUp/PageDown） - 为按钮添加
aria-label，如aria-label="播放视频"；为进度条添加aria-valuemin、aria-valuemax、aria-valuenow - 监听
keydown事件处理空格/Enter 播放暂停，避免只绑click - 隐藏原生控件后，
video元素仍需保持tabindex="0"，否则键盘焦点会跳过整个播放区域
