异常教程

HTML DOM Video readyState 属性（手把手讲解）

更新时间:

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

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

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

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

前言

在现代网页开发中，视频元素（<video>）已成为丰富用户体验的重要组成部分。然而，开发者常常会遇到视频加载缓慢、播放卡顿或状态管理混乱等问题。为了解决这些问题，HTML DOM 提供了 readyState 属性，它能实时反映视频的加载状态。本文将深入解析这一属性的核心概念、应用场景及进阶技巧，帮助开发者更高效地控制视频播放行为。

一、基础概念：什么是 HTML DOM Video readyState 属性？

readyState 是 HTML5 <video> 元素的属性之一，用于返回当前视频的“就绪状态”（Ready State）。它通过一个整数值（0-4）表示视频在浏览器中的加载进度，开发者可以通过 JavaScript 直接访问这一属性。

形象比喻：视频加载的“快递状态”

想象你在线订购了一件包裹，快递的物流状态会经历“未下单”“已发货”“运输中”“部分送达”“已签收”等阶段。readyState 类似于此，它将视频的加载过程划分为五个阶段：

readyState 值对应状态描述
0HAVEN’T STARTED尚未开始加载视频
1LOADING已开始加载，但数据不足
2LOADED META已加载元数据（如时长、尺寸）
3LOADED SOME DATA已加载部分视频数据
4LOADED ALL DATA已完全加载所有视频数据

二、readyState 的五种状态详解

以下将逐个解析 readyState 的五个状态值，并说明其在实际开发中的意义：

1. 状态 0：HAVEN’T STARTED（未开始加载）

当视频元素被创建但尚未触发加载时，readyState 的值为 0。例如，用户尚未点击播放按钮，或视频源地址（src）未被正确设置。

const video = document.querySelector('video');
console.log(video.readyState); // 输出 0（假设未触发加载）

2. 状态 1：LOADING（正在加载，数据不足）

当浏览器开始加载视频数据，但已加载的内容不足以满足播放需求时，状态会变为 1。此时，视频可能处于缓冲阶段，但无法立即播放。

video.addEventListener('loadstart', () => {
  console.log('开始加载视频，readyState 变为 1');
});

3. 状态 2：LOADED META（已加载元数据）

当视频的元数据（如时长、尺寸、轨道信息）加载完成时，状态会变为 2。此时，开发者可以通过 video.duration 获取视频总时长。

video.addEventListener('loadedmetadata', () => {
  console.log(`视频时长为 ${video.duration} 秒`);
});

4. 状态 3：LOADED SOME DATA（已加载部分数据）

当浏览器加载了足够的视频数据以支持播放，但尚未完全加载完毕时，状态为 3。此时，视频可以开始播放，但可能仍需缓冲。

if (video.readyState === 3) {
  video.play(); // 可以尝试播放，但可能中途缓冲
}

5. 状态 4：LOADED ALL DATA（已完全加载）

当视频的所有数据都加载完成时，状态变为 4。此时，视频可以无缝播放，无需额外缓冲。

video.addEventListener('loadeddata', () => {
  console.log('视频数据完全加载，readyState 变为 4');
});

三、实际案例：如何利用 readyState 管理视频加载

案例 1：显示动态加载进度

通过监听 timeupdate 事件，结合 readyState 的值，可以为用户实时显示视频的加载进度：

function updateProgress() {
  const progress = document.getElementById('progress');
  if (video.readyState >= 3) {
    const loaded = video.buffered.end(0);
    const total = video.duration;
    progress.style.width = `${(loaded / total) * 100}%`;
  }
}

video.addEventListener('timeupdate', updateProgress);

案例 2：处理加载失败

当视频加载失败时，readyState 会一直保持为 0 或 1。此时可通过 error 事件提示用户：

video.addEventListener('error', () => {
  if (video.error) {
    console.error('视频加载失败:', video.error.message);
    document.getElementById('error-message').textContent = '视频无法加载，请检查网络';
  }
});

四、注意事项与常见问题

1. 不要依赖 readyState 的实时性

由于网络延迟或视频格式复杂，readyState 的值可能在短时间内频繁变化。例如，视频可能在加载到状态 3 后又因缓冲不足回落到状态 1。因此，建议结合其他事件（如 canplay、canplaythrough）进行状态判断。

2. 跨浏览器兼容性

主流浏览器（Chrome、Firefox、Safari）对 readyState 的支持较为一致，但移动端浏览器（如 Android 的 WebView）可能存在细微差异。建议通过浏览器兼容性测试工具（如 Can I Use）验证具体场景。

3. 与 video 其他属性的协同

readyState 需与其他属性（如 buffered、duration）配合使用。例如，通过 buffered.end(0) 可获取已加载数据的结束时间点，从而计算缓冲进度。

五、进阶技巧：结合事件与属性优化视频体验

技巧 1：自动播放控制

通过判断 readyState 的值，可以实现“加载足够数据后自动播放”：

function autoPlayIfReady() {
  if (video.readyState >= 3) {
    video.play().catch(error => {
      console.error('播放被阻止:', error);
    });
  }
}

video.addEventListener('loadeddata', autoPlayIfReady);

技巧 2：动态切换视频源

当用户选择不同分辨率的视频时，可通过重置 src 并监听 readyState 确保新视频加载完成：

function switchVideoSource(newSrc) {
  video.pause();
  video.src = newSrc;
  video.load();
  
  // 等待加载完成
  const checkReady = setInterval(() => {
    if (video.readyState === 4) {
      clearInterval(checkReady);
      video.play();
    }
  }, 100);
}

六、结论

HTML DOM Video readyState 属性 是开发者控制视频加载和播放行为的核心工具。通过理解其五种状态值，并结合事件监听和代码逻辑，开发者可以实现动态加载提示、错误处理、自动播放优化等功能，显著提升用户体验。掌握这一属性后，建议进一步探索 <video> 的其他高级特性（如自定义播放控件、流媒体支持），以构建更复杂且可靠的视频应用。

通过本文的讲解，读者应能清晰理解 HTML DOM Video readyState 属性 的原理与用法，并在实际项目中灵活应用。希望这些知识能帮助开发者解决视频加载相关的常见问题，为用户提供更流畅的视听体验。

最新发布

查看更多文章