::-webkit-media-controls仅旧版Chrome≤68和早期Safari支持现代Chromium及Firefox均不支持唯一可控方案是禁用原生控件并手动实现HTMLCSSJS自定义控制条。Chrome/Firefox里::-webkit-media-controls根本不起作用因为这套伪元素只在旧版 Chrome≤68和早期 Safari 中有效现代 Chromium 内核包括 Edge、新版 Chrome、Opera已彻底移除支持::-webkit-media-controls 现在是“写上去就失效”的典型。Firefox 从未支持过它。你看到的控制条其实是浏览器内置的 Shadow DOM 组件但标准没开放接口让你直接样式化。真正能动手改控制条样式的唯一路径用controlsList 自定义控件原生 video 的控制条不可样式化唯一可控方案是关掉默认控件自己用 HTMLCSSJS 实现。关键第一步是禁用原生 UI加属性 controlsListnodownload noremoteplayback nofullscreen可选仅隐藏部分按钮必须加 controls 属性才能触发 controlsList 生效但紧接着要用 styledisplay:none 或 JS 移除它否则原生条仍会显示更稳妥做法直接不写 controls全手动实现播放/暂停/进度条/音量等例如video idmyVideo controlsListnodownload/video然后 JS 执行 myVideo.removeAttribute(controls)再挂载自定义 DOM。进度条拖动不准、时间跳变卡顿小心currentTime赋值时机自定义进度条通常监听 input 事件更新 video.currentTime但直接赋值可能被浏览器节流或忽略尤其在视频未加载完成时 HIX.AI HIX.AI是一个多功能的一体化AI写作助手集成了120多种AI写作工具支持50多种语言能够满足各种写作需求。