HTML视频标签本身不提供缓冲动画功能，但可通过监听waiting、stalled、canplay等事件，结合CSS旋转动画和JavaScript控制.loading-indicator显隐来实现“正在缓冲”提示，需防抖处理并优化交互体验。
HTML视频标签本身不提供缓冲动画功能，但可以通过监听 video 元素的事件（如 waiting、canplay、stalled）配合 CSS 动画和 DOM 操作，手动实现“正在缓冲”的提示效果。
监听缓冲状态的关键事件
浏览器在视频因网络慢或数据未就绪而暂停播放时，会触发特定事件：
- waiting：播放被暂停，等待更多媒体数据（最常用，适合显示缓冲提示）
- stalled：浏览器尝试获取数据但长时间无响应（可能网络异常）
- canplay 或 canplaythrough：数据恢复，可隐藏提示
用 HTML + CSS 实现简易缓冲动画
在 <video> 外层包裹一个容器，内部添加一个带旋转动画的 loading 提示：
<div class="video-container"> <video id="myVideo" src="example.mp4" controls></video> <div class="loading-indicator"></div> </div>
CSS 示例（旋转圆圈）：
立即学习“前端免费学习笔记（深入）”；
.loading-indicator {
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
display: none;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.video-container {
position: relative;
display: inline-block;
}
用 JavaScript 控制显示与隐藏
绑定事件，动态切换提示层的可见性：
const video = document.getElementById('myVideo');
const indicator = document.querySelector('.loading-indicator');
video.addEventListener('waiting', () => {
indicator.style.display = 'block';
});
video.addEventListener('canplay', () => {
indicator.style.display = 'none';
});
video.addEventListener('stalled', () => {
indicator.style.display = 'block';
});
// 可选：防止重复触发导致闪烁，加简单防抖
let isBuffering = false;
video.addEventListener('waiting', () => {
if (!isBuffering) {
isBuffering = true;
indicator.style.display = 'block';
}
});
video.addEventListener('canplay', () => {
isBuffering = false;
indicator.style.display = 'none';
});
增强体验的小技巧
让提示更自然、不干扰操作：
- 给
.loading-indicator加pointer-events: none，避免遮挡视频控件 - 使用
opacity+transition替代display切换，实现淡入淡出 - 在移动端可加文字提示，如“加载中…”（注意字体大小适配）
- 若视频启用了
preload="metadata"，首次播放前的缓冲也会触发waiting，需结合readyState判断是否真卡顿
