video元素默认控制条无法换肤，必须禁用原生controls属性，通过html+css绘制控件并用javascript绑定播放、暂停、进度拖动等行为，同时注意跨浏览器兼容性与移动端交互细节。
video 元素默认控制条无法直接换肤，得用 JS + CSS 覆盖
HTML5 的 <video></video> 标签自带的 controls 属性只提供浏览器原生控件，样式完全不可控——Chrome、Safari、Firefox 渲染出的进度条、音量滑块长得都不一样，也不存在“皮肤”概念。真要自定义外观，必须禁用原生控件（去掉 controls），自己用 HTML + CSS 画控制条，再用 JavaScript 绑定播放、暂停、拖动等行为。
隐藏原生控件并手动实现播放/暂停按钮
这是最基础的一步，否则自定义按钮和原生控件会重叠或冲突：
- 移除
<video controls></video>中的controls属性 - 给
<video></video>添加id（如id="myVideo"），方便 JS 获取 - 用
<button></button>模拟播放/暂停按钮，监听click事件调用play()或pause() - 注意：iOS Safari 要求用户手势触发播放，不能自动
play()
<video id="myVideo" src="demo.mp4"></video>
<button id="playBtn">▶</button>
<p><script>
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');</p><p>btn.addEventListener('click', () => {
if (video.paused) {
video.play().catch(e => console.warn('Autoplay blocked:', e));
} else {
video.pause();
}
});
</script>用 input[type="range"] 实现可拖动的进度条
原生 <input type="range"> 是最稳妥的进度条方案，兼容性好、触控友好，但需手动同步视频时间和滑块值：
- 监听
timeupdate事件更新input.value（需换算为百分比） - 监听
input事件（不是change）实时拖动：video.currentTime = input.valueAsNumber * video.duration -
input.max应设为1（表示 100%），避免用秒数导致小数精度问题 - 首次加载时视频
duration可能为NaN，需等loadedmetadata事件后再初始化滑块
<input type="range" id="progress" min="0" max="1" step="0.001">
<p><script>
const progress = document.getElementById('progress');
progress.addEventListener('input', () => {
video.currentTime = progress.valueAsNumber * video.duration;
});</p><p>video.addEventListener('timeupdate', () => {
if (video.duration) {
progress.value = video.currentTime / video.duration;
}
});</p><p>video.addEventListener('loadedmetadata', () => {
progress.value = 0;
});
</script>自定义样式时最容易被忽略的三个点
很多人写了 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 处理，稍不注意就会卡顿或误触发。
