HTML 音频/视频 DOM paused 属性（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，音频和视频的交互控制是一个常见需求。无论是开发音乐播放器、在线教育平台，还是视频会议系统，开发者都需要精准控制媒体的播放状态。而 HTML 音频/视频 DOM paused 属性 正是实现这一目标的核心工具之一。它允许开发者通过 JavaScript 直接读取或修改媒体元素的暂停状态，从而构建更灵活、交互性更强的媒体播放功能。本文将从基础概念、语法细节、实际案例到高级应用场景，系统性地解析这一属性的使用方法，并通过代码示例帮助读者快速掌握其实现逻辑。

一、HTML 音频/视频 DOM 的基础概念

在深入探讨 paused 属性 之前，我们需要先理解 HTML 音频/视频元素与 DOM（文档对象模型） 之间的关系。

1.1 HTML 音频/视频元素

HTML 提供了 <audio> 和 <video> 元素，用于在网页中嵌入多媒体内容。例如：

<audio id="myAudio" src="example.mp3"></audio>
<video id="myVideo" src="example.mp4" controls></video>

这两个元素不仅是 HTML 标签，还对应着浏览器提供的 JavaScript 对象。通过 DOM，开发者可以像操作其他 HTML 元素一样，直接访问和控制它们的属性、方法和事件。

1.2 DOM 的核心作用

DOM 是浏览器提供的一个编程接口，它将 HTML 文档中的每个元素表示为对象，并允许开发者通过 JavaScript 对这些对象进行操作。例如，通过 document.getElementById("myVideo") 获取视频元素后，就能调用其 play() 方法启动播放。

二、paused 属性的核心功能与语法解析

paused 属性 是 HTML 音频/视频元素的 布尔型属性，用于判断媒体当前是否处于暂停状态。

2.1 属性的基本语法

// 获取视频元素的 paused 属性值
const videoElement = document.getElementById("myVideo");
const isPaused = videoElement.paused; // 返回 true 或 false

当媒体处于暂停状态时（例如用户点击“暂停”按钮，或播放结束前未继续播放），paused 的值为 true；否则为 false。

2.2 属性的双向性

虽然 paused 属性是只读的（无法直接通过赋值修改），但它与媒体的播放状态紧密相关。例如，当调用 video.play() 后，如果播放成功，paused 的值会变为 false；而调用 video.pause() 则会立即将其设为 true。

三、通过 paused 属性实现基础功能的案例

以下通过几个典型场景，演示如何结合 paused 属性 实现交互功能。

3.1 判断当前播放状态

需求：在页面中显示一个按钮，根据视频的播放/暂停状态动态切换按钮文字。

const video = document.getElementById("myVideo");
const playButton = document.getElementById("playButton");

playButton.addEventListener("click", () => {
  if (video.paused) {
    video.play();
    playButton.textContent = "Pause";
  } else {
    video.pause();
    playButton.textContent = "Play";
  }
});

逻辑解析：

• 当用户点击按钮时，首先检查 video.paused 的值。
• 如果为 true（视频已暂停），则调用 play() 并将按钮文字改为“Pause”；反之则调用 pause() 并改为“Play”。

3.2 自动播放与暂停的逻辑控制

需求：实现一个“循环播放”功能，当视频播放结束时自动回到开头并重新播放。

const video = document.getElementById("myVideo");

video.addEventListener("ended", () => {
  video.currentTime = 0; // 将播放时间重置为0
  video.play(); // 触发播放
});

关键点：

• 当视频自然播放结束时，ended 事件会被触发。
• 此时 paused 属性可能为 true（如用户手动暂停后播放结束），但通过调用 play() 可覆盖这一状态。

四、paused 属性的进阶应用场景

除了基础功能，paused 属性 还能与其他 DOM 方法和事件结合，实现更复杂的交互逻辑。

4.1 结合键盘快捷键控制播放

需求：允许用户通过键盘上的空格键控制视频的暂停和播放。

document.addEventListener("keydown", (event) => {
  if (event.key === " ") { // 监听空格键
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
});

扩展思考：

• 可以通过 event.preventDefault() 防止空格键触发其他默认行为（如页面滚动）。
• 结合 requestAnimationFrame 可实现更流畅的播放控制。

4.2 动态调整播放速度与暂停状态

需求：根据用户选择的播放速度（如0.5倍速、1.5倍速），在调整速度时暂停视频并重新定位时间轴。

const speedSelect = document.getElementById("speedSelect");

speedSelect.addEventListener("change", () => {
  video.pause(); // 先暂停视频
  video.playbackRate = parseFloat(speedSelect.value); // 设置播放速度
  video.play(); // 恢复播放
});

关键点：

• 调整 playbackRate 属性前必须暂停视频，否则可能引发浏览器兼容性问题。
• 通过 paused 属性确保操作的稳定性。

五、常见问题与解决方案

5.1 自动播放时的权限限制

现代浏览器出于用户体验考虑，禁止页面在未触发用户交互时自动播放音频/视频。例如：

// 直接调用 play() 可能会失败
video.play().then(() => {
  console.log("播放成功");
}).catch(() => {
  console.log("播放被阻止，需用户交互");
});

解决方案：

• 将 play() 调用放在用户点击事件的回调函数中。

5.2 跨浏览器兼容性

部分旧版浏览器可能对 paused 属性的支持不完善。可以通过以下方法增强兼容性：

// 检查浏览器是否支持 paused 属性
if ("paused" in video) {
  // 安全使用 paused 属性
} else {
  // 提供备用方案（如通过播放状态事件模拟）
}

六、总结与扩展方向

通过本文的学习，读者应能掌握 HTML 音频/视频 DOM paused 属性 的核心用法，并通过代码示例理解其在实际开发中的应用场景。以下是进一步的学习建议：

6.1 深入其他媒体属性与方法

• currentTime：控制当前播放时间。
• volume：调整音量。
• canPlayType()：检测浏览器是否支持特定媒体格式。

6.2 构建完整的播放器功能

尝试实现以下功能：

• 进度条拖拽控制
• 全屏模式切换
• 多媒体文件列表切换

6.3 结合现代前端框架

在 React、Vue 等框架中，可以通过状态管理（如 useState）与 paused 属性 结合，实现更复杂的交互逻辑。

通过系统性地掌握 paused 属性 的原理和应用，开发者能够更灵活地控制网页中的多媒体内容，为用户提供更流畅、个性化的交互体验。