HTML5 video元素基础
要实现JavaScript控制视频播放，首先需要在页面中引入HTML5的video元素，该元素内置了丰富的属性和方法，支持通过脚本进行交互控制。
基础的video元素结构如下：
<video id="myVideo" width="800" height="450" controls> <source src="test.mp4" type="video/mp4"> 您的浏览器不支持video标签 </video>
如果不想使用浏览器默认的控件，可以去掉controls属性，通过自定义按钮结合JavaScript实现控制。
获取video元素实例
首先需要获取页面中的video元素实例，后续所有控制操作都基于这个实例完成：
// 通过id获取video元素
const videoElement = document.getElementById('myVideo');
// 也可以通过选择器获取
// const videoElement = document.querySelector('video');常见播放控制方法
播放与暂停控制
video实例提供了play()和pause()方法，分别用于触发播放和暂停操作，这两个方法都返回Promise对象。
// 播放视频
function playVideo() {
videoElement.play().then(() => {
console.log('视频开始播放');
}).catch((err) => {
console.log('播放失败:', err);
});
}
// 暂停视频
function pauseVideo() {
videoElement.pause();
console.log('视频已暂停');
}进度跳转控制
可以通过修改video实例的currentTime属性实现进度跳转，该属性表示当前播放的时间点，单位为秒。
// 跳转到视频第10秒的位置
function seekToTenSeconds() {
// 先判断视频总时长是否大于10秒
if (videoElement.duration > 10) {
videoElement.currentTime = 10;
} else {
console.log('视频总时长不足10秒');
}
}
// 快进5秒
function forwardFiveSeconds() {
const newTime = videoElement.currentTime + 5;
// 不能超过视频总时长
videoElement.currentTime = Math.min(newTime, videoElement.duration);
}
// 后退5秒
function backwardFiveSeconds() {
const newTime = videoElement.currentTime - 5;
// 不能小于0
videoElement.currentTime = Math.max(newTime, 0);
}音量控制
video实例的volume属性用于控制音量，取值范围为0到1，0表示静音，1表示最大音量；muted属性表示是否静音，为布尔值。
// 设置音量为50%
function setHalfVolume() {
videoElement.volume = 0.5;
}
// 切换静音状态
function toggleMute() {
videoElement.muted = !videoElement.muted;
}播放倍速控制
修改playbackRate属性可以调整播放倍速，1为正常速度，小于1为慢放，大于1为快放，常见取值有0.5、0.75、1、1.5、2等。
// 设置2倍速播放
function setDoubleSpeed() {
videoElement.playbackRate = 2;
}
// 恢复正常速度
function resetSpeed() {
videoElement.playbackRate = 1;
}监听视频状态事件
除了主动控制，还可以监听video元素的事件来获取播放状态，实现更丰富的交互逻辑。
// 监听播放事件
videoElement.addEventListener('play', () => {
console.log('视频开始播放');
});
// 监听暂停事件
videoElement.addEventListener('pause', () => {
console.log('视频已暂停');
});
// 监听进度更新事件，实时获取当前播放时间
videoElement.addEventListener('timeupdate', () => {
const currentTime = videoElement.currentTime;
const duration = videoElement.duration;
console.log(`当前播放进度: ${currentTime}/${duration}`);
});
// 监听视频加载完成事件，获取总时长
videoElement.addEventListener('loadedmetadata', () => {
console.log('视频总时长:', videoElement.duration);
});完整示例
以下是一个完整的自定义视频控制示例，包含播放暂停、进度跳转、音量调节功能：
<!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>
.control-panel {
margin-top: 10px;
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<video id="myVideo" width="800" height="450">
<source src="test.mp4" type="video/mp4">
您的浏览器不支持video标签
</video>
<div class="control-panel">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="seekBtn">跳转到10秒</button>
<button id="volumeUpBtn">音量+</button>
<button id="volumeDownBtn">音量-</button>
</div>
<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const seekBtn = document.getElementById('seekBtn');
const volumeUpBtn = document.getElementById('volumeUpBtn');
const volumeDownBtn = document.getElementById('volumeDownBtn');
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
seekBtn.addEventListener('click', () => {
if (video.duration > 10) {
video.currentTime = 10;
}
});
volumeUpBtn.addEventListener('click', () => {
video.volume = Math.min(video.volume + 0.1, 1);
});
volumeDownBtn.addEventListener('click', () => {
video.volume = Math.max(video.volume - 0.1, 0);
});
</script>
</body>
</html>
JavaScriptHTML5_videoplay_controlpause_controlplayback_rate修改时间：2026-06-05 02:16:06