在网页中嵌入视频时，默认的浏览器控制栏往往和整体页面风格不符，很多开发者会选择自定义视频控制功能，其中播放暂停按钮是最基础也最常用的功能。下面我们就一步步实现这个功能。
基础准备：HTML视频标签
首先我们需要在页面中嵌入一个video元素，注意这里不要添加controls属性，否则会显示默认的控制栏，影响自定义按钮的效果。
<!-- 视频容器 -->
<div class="video-container">
<!-- 视频元素，不添加controls属性隐藏默认控制栏 -->
<video id="myVideo" width="800" height="450">
<source src="video_demo.mp4" type="video/mp4">
<!-- 如果浏览器不支持video标签会显示这段提示 -->
您的浏览器不支持HTML5视频播放
</video>
<!-- 自定义控制按钮区域 -->
<div class="video-controls">
<button id="playPauseBtn">播放</button>
</div>
</div>实现播放暂停逻辑
接下来通过JavaScript获取video元素和按钮元素，绑定点击事件，实现点击按钮切换播放和暂停状态的功能。
// 获取视频元素和按钮元素
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
// 给按钮绑定点击事件
playPauseBtn.addEventListener('click', function() {
// 判断视频当前是否暂停
if (video.paused) {
// 如果暂停，调用play方法播放视频
video.play();
// 修改按钮文字为暂停
playPauseBtn.textContent = '暂停';
} else {
// 如果正在播放，调用pause方法暂停视频
video.pause();
// 修改按钮文字为播放
playPauseBtn.textContent = '播放';
}
});
// 可选：视频播放结束时，重置按钮文字为播放
video.addEventListener('ended', function() {
playPauseBtn.textContent = '播放';
});优化按钮样式
默认的按钮样式比较简陋，我们可以通过CSS调整按钮的位置和外观，让它更符合页面设计。
.video-container {
position: relative;
width: 800px;
margin: 0 auto;
}
.video-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#playPauseBtn {
padding: 8px 24px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#playPauseBtn:hover {
background-color: rgba(0, 0, 0, 0.8);
}常见问题说明
- 如果视频无法播放，首先检查视频路径是否正确，同时确保视频格式是浏览器支持的mp4、webm等格式。
- 部分浏览器要求视频必须用户交互后才能播放，所以不要尝试在页面加载完成后自动调用video.play()，否则可能会被浏览器拦截。
- 如果要扩展更多控制功能，比如进度条、音量调节，可以基于video元素的
currentTime、volume等属性继续开发。
完整示例代码
下面是整合了HTML、CSS、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 {
position: relative;
width: 800px;
margin: 20px auto;
}
.video-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#playPauseBtn {
padding: 8px 24px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#playPauseBtn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="video-container">
<video id="myVideo" width="800" height="450">
<source src="video_demo.mp4" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>
<div class="video-controls">
<button id="playPauseBtn">播放</button>
</div>
</div>
<script>
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
playPauseBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
playPauseBtn.textContent = '暂停';
} else {
video.pause();
playPauseBtn.textContent = '播放';
}
});
video.addEventListener('ended', function() {
playPauseBtn.textContent = '播放';
});
</script>
</body>
</html>
html_videoJavaScriptplay_pause_controlHTML5_video修改时间：2026-05-31 22:12:12