HTML5 video 元素虽无标准 waiting 事件，但实际存在该事件，用于检测因缓冲不足导致的播放暂停；监听 waiting 显示加载动画，监听 playing 隐藏动画，实现卡顿反馈。
HTML5 的 video 元素本身**没有名为 waiting 的标准事件**，但有一个真实存在的 waiting 事件——它会在视频因缓冲不足而暂停播放、等待更多数据时触发。这个事件正是检测“卡顿”（即播放中断、需等待加载）的关键信号，可用于显示自定义加载动画。
理解 waiting 事件的触发时机
当视频播放器无法立即继续播放（例如网络慢、缓冲区空了、seek 到未缓存位置），会自动进入 waiting 状态，并触发 waiting 事件。它不同于 loadstart 或 progress，专指“正因缺数据而暂停”的瞬间。
注意：它不表示“永远卡住”，而是“暂时等待”。后续可能触发 canplay、canplaythrough 或 playing 表示恢复。
监听 waiting 并显示加载动画
核心思路：监听 waiting 事件 → 显示遮罩层/旋转图标；监听 playing 或 canplay → 隐藏动画。
立即学习“前端免费学习笔记（深入）”；
- 用
video.addEventListener('waiting', handler)捕获卡顿开始 - 用
video.addEventListener('playing', handler)捕获恢复播放（推荐，比canplay更准确反映实际播放状态） - 动画容器建议用绝对定位覆盖在 video 上，避免布局干扰
简易实现示例（含 HTML + CSS + JS）
以下是一个轻量、可直接运行的方案：
<style>
.video-container { position: relative; display: inline-block; }
.loading-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.3); display: none; justify-content: center; align-items: center;
}
.loading-spinner { width: 40px; height: 40px; border: 4px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
<div class="video-container">
<video id="myVideo" width="640" height="360" controls>
<source src="your-video.mp4" type="video/mp4">
</video>
<div class="loading-overlay"><div class="loading-spinner"></div></div>
</div>
<script>
const video = document.getElementById('myVideo');
const overlay = document.querySelector('.loading-overlay');
video.addEventListener('waiting', () => {
overlay.style.display = 'flex';
});
video.addEventListener('playing', () => {
overlay.style.display = 'none';
});
// 可选：防止用户点击暂停后 overlay 仍显示，加个 pause 监听
video.addEventListener('pause', () => {
if (video.readyState < video.HAVE_FUTURE_DATA) {
overlay.style.display = 'flex';
}
});
</script>
注意事项与优化建议
-
不要只依赖 waiting：某些浏览器（如 Safari）在首帧加载时也可能触发 waiting，可在
waiting中加简单防抖（如setTimeout延迟 300ms 再显示）避免闪现 -
配合 readyState 判断更稳妥：在 waiting 回调中检查
video.readyState ，确保确实是数据不足而非其他原因 - 移动端兼容性良好：waiting 和 playing 在 iOS Safari / Android Chrome 均支持，但部分安卓 WebView 版本可能有延迟，建议实测
-
避免阻塞主线程：加载动画用纯 CSS 实现（如上面的
spin动画），不要用 JS 定时器重绘
