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