::-webkit-media-controls仅旧版chrome（≤68）和早期safari支持，现代chromium及firefox均不支持；唯一可控方案是禁用原生控件并手动实现html+css+js自定义控制条。
Chrome/Firefox里::-webkit-media-controls根本不起作用？
因为这套伪元素只在旧版 Chrome（≤68）和早期 Safari 中有效，现代 Chromium 内核（包括 Edge、新版 Chrome、Opera）已彻底移除支持，::-webkit-media-controls 现在是“写上去就失效”的典型。Firefox 从未支持过它。你看到的控制条，其实是浏览器内置的 Shadow DOM 组件，但标准没开放接口让你直接样式化。
真正能动手改控制条样式的唯一路径：用controlsList + 自定义控件
原生 <video></video> 的控制条不可样式化，唯一可控方案是关掉默认控件，自己用 HTML+CSS+JS 实现。关键第一步是禁用原生 UI：
- 加属性
controlsList="nodownload noremoteplayback nofullscreen"（可选，仅隐藏部分按钮） - 必须加
controls属性才能触发controlsList生效，但紧接着要用style="display:none"或 JS 移除它，否则原生条仍会显示 - 更稳妥做法：直接不写
controls，全手动实现播放/暂停/进度条/音量等
例如：<video id="myVideo" controlslist="nodownload"></video>，然后 JS 执行 myVideo.removeAttribute('controls')，再挂载自定义 DOM。
进度条拖动不准、时间跳变卡顿？小心currentTime赋值时机
自定义进度条通常监听 input 事件更新 video.currentTime，但直接赋值可能被浏览器节流或忽略，尤其在视频未加载完成时：
- 务必先检查
video.readyState >= 2（表示已有足够帧可播放），否则赋值无效 -
input事件太频繁，建议改用change（用户松手后触发）或节流处理 - 设置前加
video.pause()能提升响应确定性，避免边播边设导致跳帧 - 设完立刻读
video.currentTime，可能不是你设的值——这是正常行为，说明尚未 seek 完成，需监听seeked事件确认
音量滑块在 iOS Safari 上完全不响应？
iOS 对 video.volume 有硬性限制：只有用户手势触发的播放（如点击）之后，才能修改音量。单纯监听滑块 input 并赋值 video.volume 会被静音且无报错。
- 必须确保首次播放由用户真实点击触发（不能自动播放、不能用
play()在非交互上下文中调用） - 音量滑块初始值应设为
video.volume，但修改动作要包裹在click或touchend回调里 - iOS 还会忽略
volume > 1的值，强制截断为 1；设0是唯一可靠静音方式
这些限制不是 bug，是 iOS 的媒体策略，绕不过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
