HTML 音频/视频 DOM readyState 属性（建议收藏）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在 HTML5 时代，音频和视频元素的无缝集成让网页开发更加生动。无论是在线教育平台、音乐播放器还是视频直播，开发者都需要精准控制媒体的播放状态。然而，当用户尝试播放媒体时，可能会遇到加载缓慢、缓冲中断或资源不可用等问题。此时，HTML 音频/视频 DOM readyState 属性便成为了解决这些问题的关键工具。它像一个“状态指示器”，实时反馈媒体资源的加载和播放进度，帮助开发者构建更流畅的用户体验。

本文将从基础概念出发，结合实际案例和代码示例，深入讲解 readyState 属性的用途、状态值含义及应用场景，帮助开发者轻松应对媒体播放的复杂场景。

什么是 readyState 属性？

核心定义与作用

readyState 是 HTML5 中音频（<audio>）和视频（<video>）元素的 DOM 属性，用于返回当前媒体资源的加载和播放状态。其值是一个 整数，范围从 0 到 4，每个数值对应不同的状态。通过监听或检查 readyState 的值，开发者可以：

• 判断媒体是否已加载元数据（如时长、尺寸）
• 控制播放前的缓冲进度
• 预防因资源未加载完成导致的播放中断
• 根据状态动态显示用户界面（如加载提示、播放按钮禁用状态）

形象比喻：媒体播放的“交通信号灯”

想象 readyState 是一个交通信号灯：

• 红色（0）：媒体尚未初始化，完全未加载。
• 黄色（1~3）：部分加载，但无法立即播放。
• 绿色（4）：资源已加载足够，可流畅播放。

开发者通过观察这个“信号灯”，就能在合适时机触发播放、显示进度条或提示用户等待。

readyState 的状态值详解

状态值表格

各状态的含义与使用场景

1. HAVE_NOTHING (0)

• 含义：媒体元素尚未初始化，未开始加载资源。
• 常见场景：页面刚加载时，用户未点击播放按钮，或网络连接中断。
• 应对策略：显示“点击播放”按钮，或提示用户检查网络连接。

<video id="myVideo" src="video.mp4"></video>
<script>
  const video = document.getElementById('myVideo');
  if (video.readyState === 0) {
    console.log('媒体尚未加载，请检查资源路径或网络。');
  }
</script>

2. HAVE_METADATA (1)

• 含义：已加载元数据，但未加载实际媒体数据。
• 关键信息：此时可通过 video.duration 获取总时长，但无法播放。
• 典型用途：显示总时长、初始化进度条。

if (video.readyState === 1) {
  console.log(`视频总时长：${video.duration} 秒`);
  // 初始化进度条的最大值为 video.duration
}

3. HAVE_CURRENT_DATA (2)

• 含义：已加载当前播放位置的数据，但未来数据不足。
• 场景：播放过程中因网络延迟导致缓冲中断。
• 解决方案：暂停播放并显示“缓冲中”提示，直到状态提升。

video.addEventListener('waiting', () => {
  if (video.readyState === 2) {
    console.log('当前数据已加载，但未来数据不足，正在缓冲...');
    // 显示加载动画或提示信息
  }
});

4. HAVE_FUTURE_DATA (3)

• 含义：已加载当前及未来一段时间的数据，可流畅播放。
• 优势：适合需要预加载的场景，如视频直播或长视频。
• 实践案例：根据此状态动态调整播放速度或显示“可拖动进度条”。

if (video.readyState >= 3) {
  console.log('已加载足够数据，可流畅播放');
  // 启用进度条拖动功能
}

5. HAVE_ENOUGH_DATA (4)

• 含义：资源已完全加载，无需缓冲即可播放。
• 最佳状态：适用于短音频或视频，或用户主动缓存资源的场景。
• 应用示例：直接调用 play() 方法，无需额外检查。

if (video.readyState === 4) {
  video.play().then(() => {
    console.log('资源已加载完成，开始播放');
  });
}

实际案例：构建媒体播放器状态监控

案例目标

创建一个简单的视频播放器，根据 readyState 实时更新界面状态，包括：

1. 显示当前状态值及描述
2. 在缓冲时暂停播放并显示加载进度
3. 自动播放当资源足够时

HTML 结构

<video id="myVideo" src="video.mp4" controls></video>
<div id="status">状态：加载中...</div>
<div id="progress">已加载 0% 完成</div>
<button id="playBtn">播放</button>

JavaScript 实现

const video = document.getElementById('myVideo');
const statusElement = document.getElementById('status');
const progressElement = document.getElementById('progress');
const playBtn = document.getElementById('playBtn');

// 监听 readyState 变化（需定期轮询）
setInterval(() => {
  const currentState = video.readyState;
  let stateDescription = '';

  switch (currentState) {
    case 0:
      stateDescription = '未加载任何数据';
      break;
    case 1:
      stateDescription = '已加载元数据';
      break;
    case 2:
      stateDescription = '当前数据已加载，但未来数据不足';
      break;
    case 3:
      stateDescription = '当前及未来数据已加载';
      break;
    case 4:
      stateDescription = '资源已完全加载';
      break;
    default:
      stateDescription = '未知状态';
  }

  statusElement.textContent = `当前状态：${currentState} - ${stateDescription}`;
  
  // 计算加载进度（基于 buffered 和 duration）
  if (video.duration > 0) {
    const loaded = video.buffered.end(0) || 0;
    const percent = (loaded / video.duration) * 100;
    progressElement.textContent = `已加载 ${percent.toFixed(0)}% 完成`;
  }
}, 1000);

// 播放控制逻辑
playBtn.addEventListener('click', () => {
  if (video.readyState >= 3) {
    video.play();
    playBtn.textContent = '暂停';
  } else {
    alert('资源尚未加载足够，请稍后重试！');
  }
});

// 自动播放（当资源足够时）
video.addEventListener('canplay', () => {
  if (video.readyState === 4) {
    video.play();
  }
});

常见问题与解决方案

问题 1：readyState 值未及时更新

原因：浏览器可能因资源加载速度或网络波动导致状态变化延迟。
解决方案：通过 setInterval 定期轮询 readyState，或监听 loadedmetadata、progress 等事件。

video.addEventListener('progress', () => {
  // 每次加载进度更新时检查 readyState
  console.log('当前 readyState:', video.readyState);
});

问题 2：在移动端或弱网环境无法流畅播放

解决方案：

1. 设置 preload="metadata"，仅加载元数据以减少初始加载压力。
2. 结合 readyState 和 buffered 属性，动态调整播放速度或提示用户切换网络。

<video id="myVideo" src="video.mp4" preload="metadata"></video>

结论

HTML 音频/视频 DOM readyState 属性是掌控媒体播放状态的核心工具。通过理解其五种状态值的含义，并结合实际代码示例，开发者可以：

• 提升用户体验，减少播放中断
• 构建动态加载提示和交互逻辑
• 优化资源加载策略，适应不同网络环境

掌握 readyState，不仅能解决开发中的常见问题，更能为更复杂的场景（如直播流、自适应播放器）打下基础。建议读者在实际项目中尝试上述代码案例，并根据需求扩展状态监听逻辑，逐步深入掌握媒体元素的控制技巧。

通过本文的学习，您已掌握了 readyState 属性的核心知识，接下来只需动手实践，就能将其转化为提升项目质量的实用技能！