在网页中嵌入视频后，很多时候我们需要用脚本精确控制它的播放与暂停，而不是只依赖浏览器自带的控件。HTML5的video元素本身就提供了play和pause方法，配合JavaScript可以做出完全自定义的交互效果。理解这两个方法的调用时机与返回值，是写出稳定播放逻辑的基础。
一、video元素与基础方法
HTML中的video标签用于嵌入媒体资源，它对应DOM里的HTMLVideoElement对象。该对象继承了HTMLMediaElement，因此拥有play和pause这两个关键方法。play用于开始播放，pause用于暂停。最简单的情况下，我们可以在页面上放一个video和一个按钮，点击按钮就调用对应方法。
需要注意的是，play方法在较新的浏览器中返回的是一个Promise对象，而不是undefined。如果播放被浏览器策略阻止，这个Promise会被拒绝，因此直接用try catch或者then catch去处理更稳妥。pause方法则没有返回值，调用后会立即将视频挂起。
<video id="myVideo" src="https://ipipp.com/sample.mp4" muted></video> <button id="toggleBtn">播放/暂停</button>
二、play与pause的调用方式
通过JavaScript获取video元素后，就能直接调用方法。下面代码演示了如何用一个按钮切换播放状态。这里先用paused属性判断当前是否暂停，再决定调用play还是pause，避免状态错乱。
在移动端或部分桌面浏览器中，如果视频没有muted属性且不是由用户手势触发，play的Promise会拒绝并抛出错误。所以实际项目里，常把video设为muted，或者把play绑定在真实的点击事件内，从而符合自动播放策略。
const video = document.getElementById('myVideo');
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
if (video.paused) {
// play返回Promise，需捕获异常
const p = video.play();
if (p !== undefined) {
p.catch(err => {
console.log('播放被阻止：' + err.message);
});
}
} else {
video.pause();
}
});
2.1 paused属性的作用
paused是一个布尔只读属性，当视频处于暂停或未开始播放时为true。它比自己维护一个变量记录状态更可靠，因为用户也可能用右键菜单或原生控件改变播放状态。基于paused做判断，可以保证界面按钮和视频实际状态一致。
与之类似的还有ended、currentTime等属性。我们可以在pause事件里同步按钮文字，而不只是在点击时切换，这样更能应对外部状态变化。
三、监听播放状态事件
除了主动调用方法，video元素还会在状态改变时派发事件。常用的有play、pause、ended、timeupdate。通过监听这些事件，我们可以把界面控制和底层媒体状态绑定起来，避免出现按钮显示“暂停”但视频早已结束的情况。
下面的例子展示了如何用事件驱动UI。当视频真正开始播放时，按钮变为“暂停”；当暂停或结束时，按钮恢复为“播放”。这种写法比单纯在点击函数里改文字更健壮。
video.addEventListener('play', () => {
btn.textContent = '暂停';
});
video.addEventListener('pause', () => {
btn.textContent = '播放';
});
video.addEventListener('ended', () => {
btn.textContent = '重新播放';
});
3.1 使用timeupdate做进度条
timeupdate事件大约每200毫秒触发一次，适合用来更新进度条。我们用currentTime除以duration算出百分比，再设置进度元素的宽度。这样用户就能看到播放进展，也方便后续做拖拽跳转。
要注意duration在元数据未加载好时可能是NaN，所以更新前先判断是否为有限数字，防止进度条计算出错。
video.addEventListener('timeupdate', () => {
if (isFinite(video.duration) && video.duration > 0) {
const percent = (video.currentTime / video.duration) * 100;
document.getElementById('bar').style.width = percent + '%';
}
});
四、常见误区与兼容处理
一个常见误区是认为play一定会立刻播放。实际上它只是发起播放请求，真正能播还要看浏览器策略和系统资源。另一个误区是忽略Promise拒绝，导致控制台满屏报错。在Chrome等浏览器中，非静音自动播放会被拦截，必须在用户手势里调用。
对于旧版浏览器，play可能没有返回值，所以代码里用if (p !== undefined)做兼容。还有一点，video标签上的<source>如果使用相对路径，要注意页面部署位置；跨域视频还需服务端开启CORS，否则部分API受限。
| 场景 | 推荐做法 |
|---|---|
| 用户点击按钮播放 | 在click事件中调用video.play()并catch错误 |
| 页面加载后自动播放 | 设置muted后再play，或引导用户交互 |
| 自定义控制条 | 结合paused属性与play/pause事件同步UI |
五、完整自定义控制示例
把前面的知识点组合起来，就能写出一个不依赖controls属性的简易播放器。它包含播放暂停按钮和进度条，所有行为都由JavaScript驱动，方便后续扩展倍速、音量等功能。
以下代码仅展示核心逻辑。实际使用时，可以把样式写得更美观，并把事件绑定放到DOM就绪后执行，确保元素已存在。
const video = document.getElementById('myVideo');
const btn = document.getElementById('toggleBtn');
const bar = document.getElementById('bar');
btn.addEventListener('click', () => {
if (video.paused) {
video.play().catch(e => console.log(e));
} else {
video.pause();
}
});
video.addEventListener('play', () => btn.textContent = '暂停');
video.addEventListener('pause', () => btn.textContent = '播放');
video.addEventListener('timeupdate', () => {
if (isFinite(video.duration)) {
bar.style.width = (video.currentTime / video.duration * 100) + '%';
}
});
掌握play与pause方法并不复杂，难点在于理解浏览器的异步行为与自动播放限制。只要坚持用事件和属性来反映真实状态，就能写出顺滑且兼容良好的视频控制逻辑。
JavaScriptHTML_videoplay_pause修改时间：2026-08-08 09:09:30