HTML5视频Loading动画需精准反映加载状态：监听loadedmetadata、waiting、playing、stalled、error等事件，结合buffered和seeking判断进度；用CSS类控制显隐，添加aria-busy和role提升可访问性，并适配低性能设备与减少动画偏好。
HTML5视频加载时显示Loading动画，核心在于监听video元素的加载状态，并在合适时机显示/隐藏动画。关键不是“一加载就闪一下”，而是准确反映真实加载进度（如缓冲中、等待首帧、网络卡顿等），同时兼顾用户体验和可访问性。
监听关键事件，区分不同加载阶段
仅靠loadstart或canplay容易误判。应组合监听以下事件：
- loadedmetadata：元数据（宽高、时长）已加载，此时可隐藏初始占位图，但视频未必能播放
- waiting：准备播放但缺少数据（如缓冲不足），适合显示“加载中…”动画
- playing：已开始播放，应立即隐藏Loading动画
- stalled：尝试获取数据但无响应（常见于弱网），可切换为“网络较慢，请稍候”提示
- error：加载失败，需终止动画并展示错误反馈
用CSS控制动画，避免JS频繁操作DOM
将Loading动画封装为独立div，通过添加/移除CSS类来控制显隐和状态，比直接改style.display更高效且利于过渡动画：
<video id="myVideo" poster="placeholder.jpg"><source src="video.mp4" type="video/mp4"></source></video><div id="videoLoading" class="loading-indicator"> <div class="spinner"></div> <span class="loading-text">正在加载…</span> </div>
对应CSS中用.loading-indicator.active控制显示，并配合opacity和visibility实现淡入淡出，避免布局抖动。
结合buffered和seeking提升感知准确性
单纯依赖事件不够精细。可在timeupdate或定时器中检查video.buffered范围，判断当前播放位置是否在已缓冲区间内：
- 若
video.currentTime超出video.buffered.end(0)，说明即将卡顿，提前触发waiting态动画 - 用户拖拽进度条（
seeking === true）时，显示“定位中…”而非“加载中”，语义更清晰 - 避免在
canplaythrough后仍显示动画——该事件表示“理论上能播完”，但实际可能因内存释放而重新缓冲
兼顾低性能设备与无障碍支持
Loading动画本身不应成为负担：
- 用纯CSS动画（如
@keyframes rotate），避免requestAnimationFrame轮询 - 为动画容器添加
aria-busy="true"和role="status"，屏幕阅读器可感知加载状态 - 提供关闭动画的选项（如用户偏好减少运动
@media (prefers-reduced-motion)），设为animation: none - 移动端慎用大尺寸SVG动画，优先使用轻量级border-spin或scale变换
不复杂但容易忽略。真正影响体验的，往往不是动画多炫，而是它出现得是否合理、消失得是否及时、文字提示是否准确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
