video元素默认控制条无法换肤，必须禁用原生controls属性，通过HTML+CSS绘制控件并用JavaScript绑定播放、暂停、进度拖动等行为，同时注意跨浏览器兼容性与移动端交互细节。
video 元素默认控制条无法直接换肤，得用 JS + CSS 覆盖
HTML5 的 标签自带的 controls 属性只提供浏览器原生控件，样式完全不可控——Chrome、Safari、Firefox 渲染出的进度条、音量滑块长得都不一样，也不存在“皮肤”概念。真要自定义外观，必须禁用原生控件（去掉 controls），自己用 HTML + CSS 画控制条，再用 JavaScript 绑定播放、暂停、拖动等行为。
隐藏原生控件并手动实现播放/暂停按钮
这是最基础的一步，否则自定义按钮和原生控件会重叠或冲突：
- 移除
中的controls属性 - 给
添加id（如id="myVideo"），方便 JS 获取 - 用
模拟播放/暂停按钮，监听click事件调用play()或pause() - 注意：iOS Safari 要求用户手势触发播放，不能自动
play()
用 input[type="range"] 实现可拖动的进度条
原生 是最稳妥的进度条方案，兼容性好、触控友好，但需手动同步视频时间和滑块值：
- 监听
timeupdate事件更新input.value（需换算为百分比） - 监听
input事件（不是change）实时拖动：video.currentTime = input.valueAsNumber * video.duration -
input.max应设为1（表示 100%），避免用秒数导致小数精度问题 - 首次加载时视频
duration可能为NaN，需等loadedmetadata事件后再初始化滑块
自定义样式时最容易被忽略的三个点
很多人写了 CSS 却发现滑块不动、按钮没响应、时间显示错位，问题往往出在这些细节：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 对
input[type="range"]的伪元素（如::-webkit-slider-thumb）支持不一致，Safari 甚至不支持::thumb；必须用@supports或 UA 判断做降级 - 视频宽高比变化时（如全屏），控制条容器若用
position: absolute且未配合bottom: 0和width: 100%，容易脱离视频区域 -
video.readyState为0（HAVE_NOTHING）时调currentTime会静默失败，拖动前应检查video.readyState >= 2（HAVE_FUTURE_DATA）
真正难的不是画个好看滑块，而是让所有操作在各种设备、缓冲状态、网络条件下都稳定响应——尤其是移动端 touchstart/touchmove 的节流和 preventDefault 处理，稍不注意就会卡顿或误触发。
