异常教程

onwaiting 事件（一文讲透）

更新时间:

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

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

前言

在现代 Web 开发中，多媒体内容（如视频和音频）的流畅播放是用户体验的核心要素之一。然而，网络延迟、文件加载速度或资源过大等问题，可能导致播放过程中出现短暂的“等待”状态。此时，开发者需要通过事件监听和逻辑控制，及时向用户反馈或优化播放流程。本文将深入解析 onwaiting 事件 的工作原理、触发条件和应用场景，并结合代码示例，帮助开发者掌握这一事件的核心用法，提升多媒体交互的可靠性与友好性。

一、什么是 onwaiting 事件？

onwaiting 是 HTML5 中媒体元素（<video> 或 <audio>）的一个原生事件。当媒体播放器因等待数据（例如缓冲不足或网络延迟）而暂停播放时，该事件会被触发。它类似于快递运输中的“中转站”——当包裹在运输途中遇到临时障碍时，系统会通知用户当前处于“等待”状态。

核心作用：

  • 用户反馈：通过弹窗、进度条提示或自定义动画，告知用户当前播放处于缓冲阶段。
  • 逻辑控制：结合其他事件（如 onplaying 或 onprogress），动态调整播放策略，例如切换低码率资源或优化加载优先级。

二、事件触发条件与生命周期

1. 触发条件

onwaiting 事件在以下场景中被触发：

  • 缓冲不足：当播放器需要加载更多数据，但当前缓存不足以继续播放时。
  • 网络中断：因网络波动导致数据流暂时中断。
  • 资源加载延迟：视频文件过大或服务器响应缓慢时。

2. 事件生命周期

  • onwaiting → onplaying：播放器进入等待状态 → 缓冲完成后恢复播放。
  • onwaiting → onstalled：若等待时间过长且未恢复，则可能触发 onstalled（资源加载停滞）。

对比表格
| 事件名称 | 触发时机 | 常见用途 |
|----------------|------------------------------|------------------------------|
| onwaiting | 开始等待时 | 显示缓冲提示 |
| onplaying | 恢复播放时 | 隐藏缓冲提示 |
| onstalled | 长时间等待且未恢复时 | 启动备选资源或错误提示 |

三、代码实现与案例分析

1. 基础代码示例

<video id="myVideo" width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');

  // 监听 waiting 事件
  video.addEventListener('waiting', () => {
    console.log('视频进入等待状态');
    document.getElementById('buffering-indicator').style.display = 'block';
  });

  // 监听 playing 事件，恢复时隐藏提示
  video.addEventListener('playing', () => {
    console.log('视频恢复播放');
    document.getElementById('buffering-indicator').style.display = 'none';
  });
</script>

2. 实际场景：直播流的缓冲提示

在直播场景中，onwaiting 可用于优化观众体验。例如，当流媒体因网络波动卡顿时，可显示“正在缓冲”提示，并在后台尝试切换备用 CDN 源：

video.addEventListener('waiting', () => {
  showBufferingMessage(); // 自定义函数：显示全屏缓冲动画
  // 切换备用源（假设存在备用 URL）
  if (video.currentSrc !== 'backup_stream.mp4') {
    video.src = 'backup_stream.mp4';
    video.load();
  }
});

四、进阶应用：结合其他事件与逻辑优化

1. 与 onprogress 事件联动

通过 onprogress 监听缓冲进度，可更精细地控制用户反馈：

video.addEventListener('progress', () => {
  const buffered = video.buffered.end(0); // 当前缓冲的结束时间
  const duration = video.duration;
  const progress = (buffered / duration) * 100;
  updateProgressBar(progress); // 自定义函数：更新进度条百分比
});

2. 自适应带宽策略

结合 onwaiting 和 onplaying，动态切换视频清晰度：

let currentQuality = 'high';

video.addEventListener('waiting', () => {
  if (currentQuality === 'high') {
    downgradeQuality('medium'); // 自定义函数：切换至中等码率
    currentQuality = 'medium';
  }
});

video.addEventListener('playing', () => {
  // 缓冲恢复后尝试提升画质
  if (currentQuality === 'medium' && networkIsFast()) {
    upgradeQuality('high');
    currentQuality = 'high';
  }
});

五、常见问题与解决方案

1. 问题：事件未触发或触发频繁

  • 原因：浏览器兼容性问题，或未正确绑定事件监听器。
  • 解决方案：
    1. 确保代码在 DOM 加载完成后执行（如使用 DOMContentLoaded 事件）。
    2. 检查媒体元素的 preload 属性是否为 auto（默认值）。

2. 问题：如何区分用户暂停与等待状态？

  • 解决方法：通过 paused 属性判断： 
    video.addEventListener('waiting', () => {
  if (!video.paused) { // 排除用户主动暂停的情况
    console.log('因缓冲暂停');
  }
});

六、SEO 与代码性能优化

1. SEO 关键词布局

在文章标题、小标题和代码注释中自然融入关键词“onwaiting 事件”，例如：

  • 标题：“深入理解 onwaiting 事件：优化视频播放体验的关键”
  • 小标题：“onwaiting 事件 的触发条件与生命周期”
  • 代码注释：// 监听 waiting 事件

2. 性能优化建议

  • 避免过度监听：仅在必要时绑定事件，或使用 once 属性（一次性监听）。
  • 减少 DOM 操作：将频繁的 UI 更新（如进度条）封装为批量操作。

结论

onwaiting 事件 是多媒体开发中不可或缺的“信号灯”，它帮助开发者精准捕捉播放器的“等待”状态，从而优化用户体验和资源管理。通过结合 onprogress、onplaying 等事件，开发者可以构建更智能的播放逻辑，例如动态调整码率、显示友好提示或切换备用资源。随着 Web 技术的演进，对这类底层事件的深入理解，将成为提升复杂交互应用质量的关键能力。

希望本文能为编程初学者提供清晰的入门路径，并为中级开发者提供实用的优化思路。在实际开发中，建议通过浏览器开发者工具的“Network”和“Performance”面板，进一步分析 onwaiting 触发的具体原因，从而针对性地解决问题。

最新发布

查看更多文章