答案：通过HTML5 video元素和JavaScript事件监听实现视频进度条拖拽。利用mousedown/touchstart开始拖动，mousemove/touchmove实时计算鼠标/触点位置对应播放时间并跳转，mouseup/touchend结束拖动，同时通过timeupdate更新进度条宽度，结合CSS美化样式，实现兼容PC与移动端的可拖拽进度条功能。
在网页中实现视频进度条的拖拽功能，主要依赖于HTML5的元素和JavaScript对播放时间的控制。通过监听鼠标或触摸事件，可以手动调整视频的当前播放时间，从而实现拖拽进度条的效果。
1. 基本HTML结构
首先，在页面中添加一个标签和一个自定义进度条容器：
这里我们禁用默认控件中的进度条（通过移除controls里的默认行为或使用自定义控件），然后用自定义的div.progress-bar来替代。
2. 使用JavaScript实现拖拽功能
核心思路是：当用户在进度条上按下鼠标并移动时，计算鼠标位置对应的视频时间，并更新播放进度。
立即学习“Java免费学习笔记（深入）”；
以下是关键代码实现：
const video = document.getElementById('myVideo');
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');
// 更新进度条显示
function updateProgress() {
const percent = (video.currentTime / video.duration) * 100;
progress.style.width = percent + '%';
}
// 跳转到指定时间
function seek(e) {
const rect = progressBar.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width;
video.currentTime = pos * video.duration;
}
// 监听鼠标事件实现拖拽
let isDragging = false;
progressBar.addEventListener('mousedown', (e) => {
isDragging = true;
seek(e);
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
seek(e);
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// 同步进度条与播放状态
video.addEventListener('timeupdate', updateProgress);
// 防止拖动过程中选中文本
progressBar.addEventListener('dragstart', (e) => e.preventDefault());
说明：
- mousedown：开始拖动时记录状态，并触发跳转
- mousemove：只要处于拖动状态，持续更新播放时间
- mouseup：释放鼠标，停止拖动
- timeupdate：视频播放时不断更新进度条长度
- getBoundingClientRect()：精确获取进度条在页面中的位置，用于计算点击比例
3. 添加样式提升体验
为了让进度条更直观，可以加入CSS美化：
.video-container {
display: inline-block;
position: relative;
}
.progress-bar {
width: 100%;
height: 10px;
background: #ddd;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
}
.progress {
height: 100%;
width: 0;
background: #0f0;
transition: width 0.1s ease;
}
这样进度条会随着播放自动增长，拖动时绿色部分也会实时响应。
4. 支持触摸设备（移动端）
如果需要在手机上使用，补充触摸事件：
progressBar.addEventListener('touchstart', (e) => {
e.preventDefault();
isDragging = true;
seek(e.touches[0]);
});
document.addEventListener('touchmove', (e) => {
if (isDragging) {
seek(e.touches[0]);
}
});
document.addEventListener('touchend', () => {
isDragging = false;
});
使用e.touches[0]获取第一个触点坐标，逻辑与鼠标一致。
基本上就这些。通过结合HTML5视频API和事件监听，就能完整实现可拖拽的进度条功能，且兼容大多数现代浏览器。
