paused是HTML5音视频元素的只读布尔属性,直接返回true(已暂停)或false(正在播放),实时反映状态,无需事件监听;使用时需注意自动播放被阻、静音策略及与ended/seeking等属性的配合。

在 HTML5 中,paused 是 <audio> 和 <video> 元素的只读布尔属性,用于**直接判断媒体是否处于暂停状态**。它返回 true 表示已暂停(包括尚未开始播放、播放中被手动暂停、或因错误/加载失败而中断),返回 false 表示正在播放(且未被暂停)。
如何正确读取 paused 属性
直接访问元素的 paused 属性即可,无需调用方法或等待事件:
- 确保 DOM 已就绪,且媒体元素已正确获取(例如通过
document.getElementById()或querySelector()) - 属性值实时反映当前状态,可随时读取,不需要监听特定事件来“更新”它
- 注意:即使媒体尚未加载元数据(
readyState === 0),paused仍有效——此时通常为true
常见使用场景与代码示例
比如控制播放/暂停按钮的文字或图标:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
const media = document.querySelector('video');
const btn = document.querySelector('#play-btn');
btn.addEventListener('click', () => {
if (media.paused) {
media.play().catch(e => console.warn('播放被阻止或出错:', e));
} else {
media.pause();
}
});
// 实时同步按钮文字
function updateButton() {
btn.textContent = media.paused ? '▶ 播放' : '⏸ 暂停';
}
media.addEventListener('play', updateButton);
media.addEventListener('pause', updateButton);
media.addEventListener('loadedmetadata', updateButton); // 首次加载后也更新
注意事项与易错点
paused 简单可靠,但需注意边界情况:
立即学习“前端免费学习笔记(深入)”;
-
自动播放被阻止时:调用
play()失败后,paused仍为true,但不会触发pause事件;应通过play()的 Promise 拒绝来捕获 -
静音自动播放策略:部分浏览器允许静音视频自动播放(
muted+autoplay),此时初始paused可能为false,但需等canplay后才真正开始 -
不等于“是否就绪”:
paused不代表媒体能否播放,需结合readyState(如>= 2表示有足够数据可播放)和networkState判断加载状态
与其他状态属性的关系
单独用 paused 足以区分“播放中”和“非播放中”,但完整掌握媒体状态建议配合:
-
ended:是否已自然播放完毕(true时paused也为true) -
seeking:是否正在跳转(跳转中paused仍可能为false) -
playbackRate !== 0:避免因速率设为 0 导致“假暂停”(此时paused仍为false)


















