HTML视频怎么实现快速快进快退：JS控制currentTime调整
在网页中嵌入视频后，默认的播放器控制栏通常只提供基础的播放、暂停、进度拖拽功能，若需要自定义快速快进、快退的按钮，比如点击一次快进10秒、快退10秒，就可以通过JavaScript操作视频元素的currentTime属性实现。本文将详细介绍实现思路和完整代码。
核心原理
HTML5的<video>元素自带currentTime属性，该属性表示视频当前播放的时间点，单位是秒，值为浮点数。我们只需要修改这个属性的值，就可以让视频跳转到对应的时间点：
- 快进：将
currentTime加上想要快进的秒数，注意不能超过视频的总时长duration - 快退：将
currentTime减去想要快退的秒数，注意不能小于0
完整实现示例
下面的代码实现了一个包含视频播放器、播放/暂停按钮、快进10秒、快退10秒按钮的完整页面，所有功能通过原生JavaScript实现，无需依赖第三方库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义视频快进快退示例</title>
<style>
.video-container {
max-width: 800px;
margin: 20px auto;
}
video {
width: 100%;
display: block;
margin-bottom: 15px;
}
.control-group {
display: flex;
gap: 10px;
justify-content: center;
}
button {
padding: 8px 20px;
font-size: 14px;
cursor: pointer;
}
.time-info {
text-align: center;
margin-top: 10px;
color: #666;
}
</style>
</head>
<body>
<div class="video-container">
<!-- 视频元素，替换为你的视频地址 -->
<video id="myVideo" src="https://ipipp.com/sample-video.mp4" controls>
您的浏览器不支持video标签，请升级浏览器
</video>
<div class="control-group">
<button id="backBtn">快退10秒</button>
<button id="playPauseBtn">播放/暂停</button>
<button id="forwardBtn">快进10秒</button>
</div>
<div class="time-info">
当前时间：<span id="currentTime">0</span>秒 / 总时长：<span id="totalTime">0</span>秒
</div>
</div>
<script>
// 获取DOM元素
const video = document.getElementById('myVideo');
const backBtn = document.getElementById('backBtn');
const forwardBtn = document.getElementById('forwardBtn');
const playPauseBtn = document.getElementById('playPauseBtn');
const currentTimeSpan = document.getElementById('currentTime');
const totalTimeSpan = document.getElementById('totalTime');
// 快退10秒逻辑
backBtn.addEventListener('click', function() {
// 计算快退后的时间，最小不能小于0
const newTime = Math.max(0, video.currentTime - 10);
video.currentTime = newTime;
});
// 快进10秒逻辑
forwardBtn.addEventListener('click', function() {
// 计算快进后的时间，最大不能超过视频总时长
const newTime = Math.min(video.duration, video.currentTime + 10);
video.currentTime = newTime;
});
// 播放/暂停切换逻辑
playPauseBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
// 视频元数据加载完成后，更新总时长显示
video.addEventListener('loadedmetadata', function() {
totalTimeSpan.textContent = Math.round(video.duration);
});
// 视频播放过程中实时更新当前时间显示
video.addEventListener('timeupdate', function() {
currentTimeSpan.textContent = Math.round(video.currentTime);
});
</script>
</body>
</html>代码说明
上述代码分为结构、样式、逻辑三个部分：
- 结构部分：使用
<video>标签嵌入视频，同时添加三个控制按钮和时间显示区域，视频的src属性可以替换为你的实际视频地址，controls属性保留默认控制栏，方便对比自定义控制和原生控制的效果 - 样式部分：简单设置了容器最大宽度、按钮间距、时间显示样式，让页面布局更清晰
- 逻辑部分：
- 快退逻辑中，用
Math.max(0, video.currentTime - 10)确保快退后时间不会小于0，避免异常 - 快进逻辑中，用
Math.min(video.duration, video.currentTime + 10)确保快进后时间不会超过视频总时长，防止出错 - 监听
loadedmetadata事件，在视频元数据加载完成后获取总时长并显示，因为视频未加载完成时duration属性值为NaN - 监听
timeupdate事件，在视频播放时实时更新当前播放时间的显示
注意事项
如果视频地址是跨域资源，需要确保服务器配置了正确的跨域头，否则部分浏览器可能无法正常获取duration等属性。另外，若需要调整快进快退的秒数，只需要修改video.currentTime - 10和video.currentTime + 10中的数值即可，比如改成5就是快进快退5秒。