在网页里嵌入视频后，最常遇到的交互需求就是让用户主动停下播放。HTML5 提供的 Video 元素自带一套媒体控制接口，其中暂停操作靠的就是 pause() 方法。它不需要任何参数，调用之后浏览器会中止当前帧的解码与画面渲染，声音也会立刻切断。理解这个方法的行为边界，比单纯记住写法更重要。
video.pause() 的基本用法
要使用 pause()，第一步是在 DOM 中拿到 video 元素的引用。最简单的方式是给标签设置 id，然后用 getElementById 获取。拿到对象后，直接调用 pause() 即可。需要注意的是，如果视频本身处于暂停或未加载状态，再次调用 pause() 也不会报错，只是没有任何可见变化。
下面是一段最基础的暂停示例，点击按钮就会让页面上的视频停下来：
<video id="myVideo" src="https://ipipp.com/sample.mp4" controls></video>
<button onclick="stopVideo()">暂停</button>
<script>
function stopVideo() {
var v = document.getElementById('myVideo');
v.pause();
}
</script>
这段代码里，controls 属性让浏览器显示默认控制条，但我们的按钮通过 JS 同样能控制。pause() 执行后，video 的 paused 属性会变成 true，而 currentTime 不会改变，这意味着之后调 play() 能从原位置继续。
为什么有时 pause() 看起来没生效
实际开发中，很多人反馈“点了按钮视频还在播”，多数情况并不是 pause() 失效，而是 JS 拿到的元素不对。比如在 Vue 或 React 里用 ref 之前组件还没挂载，或者页面上有多个 video 却用了笼统的标签选择器，导致暂停了隐藏的那个。另一个常见误区是试图在 canplay 事件之前调用，此时媒体资源没准备好，部分旧浏览器会忽略指令。
我们可以用 paused 属性做判断，避免重复操作，也能帮调试时确认状态：
var videoNode = document.querySelector('#player');
if (!videoNode.paused) {
videoNode.pause();
console.log('已发送暂停指令');
} else {
console.log('当前已是暂停状态');
}
上面的写法先检查状态再暂停，逻辑更严谨。如果页面用了自动播放策略受限的浏览器，视频可能根本没播起来，这时 paused 一直是 true，也就谈不上“暂停失效”了。
结合事件监听做更平滑的控制
只靠按钮点击还不够，有些场景需要在视频离开视口时自动暂停，或者切到后台标签页就停掉，节省资源。这时候可以监听 scroll 或 visibilitychange，再调 pause()。这种组合用法在长列表页里很实用，能防止多个视频同时发声。
下面是一个监听页面可见性来暂停的示例：
document.addEventListener('visibilitychange', function () {
var v = document.getElementById('myVideo');
if (document.hidden && v && !v.paused) {
v.pause();
}
});
通过这种方式，用户切走浏览器选项卡时视频自动停下，回来后也不会突然大声外放。pause() 在这里充当了资源管控的开关，而不是单纯的用户界面按钮响应。
pause() 与相近方法的区别
新手容易把 pause() 和 load()、removeAttribute('src') 后调 load() 搞混。pause() 只是暂停，进度保留；load() 会重新加载资源，进度清零。若你写的是“停止并回到开头”，应该先 pause() 再把 currentTime 设为 0，而不是调 load()。
| 方法 | 是否保留进度 | 主要用途 |
|---|---|---|
| pause() | 是 | 临时中止播放 |
| play() | 是 | 从当前位置继续 |
| load() | 否 | 重置并重新加载媒体 |
从表里能看出，pause() 属于轻量操作，不会触发网络重新请求。在带宽敏感的环境下，优先用 pause() 而不是 load() 来控制，能明显减少流量消耗。
在框架中的注意事项
如果用了前端框架，直接操作 DOM 可能不是最佳实践，但 pause() 本身仍是底层 API。以 Vue 为例，可以在 ref 绑定的元素上调用，不过要确保是在 mounted 之后。React 里则用 useRef 拿到节点，再在事件回调中执行。
// React 函数组件示例
import { useRef } from 'react';
function VideoBox() {
const vidRef = useRef(null);
const handlePause = () => {
if (vidRef.current) {
vidRef.current.pause();
}
};
return (
<video ref={vidRef} src="https://ipipp.com/clip.mp4" />
);
}
这种写法把暂停逻辑收敛在组件内，比全局选择器更安全。只要 ref 正确指向渲染出来的 video 标签，pause() 就能稳定生效。总体来看，HTML5 的 video.pause() 方法设计得很直观，麻烦多半出在元素引用和播放策略上，理清这两点就能随意控制视频暂停。
HTML5video_pauseJavaScript修改时间：2026-08-05 19:21:27