改善用户等待体验的关键是让等待“可感知、有反馈、不焦虑”：通过css类精准控制加载态显隐，结合事件与状态双重判断优化反馈时机，合理设置preload与poster，并确保服务端支持range请求。
改善用户等待体验，关键不是消除加载，而是让等待“可感知、有反馈、不焦虑”。加载状态监控的核心目标是把技术过程转化为用户能理解的视觉信号，并在合适时机给出响应。
用 CSS 类精准控制加载态显隐
DPlayer 等播放器依赖 class 切换来管理加载状态。例如：
- 开始加载时：添加
dplayer-loading类，触发 loading 动画或遮罩 - 首帧就绪（
loadeddata）时立即移除该类，比等canplaythrough快 1–3 秒 - 避免只靠事件名判断——
waiting表示缓冲中断，playing才代表真正恢复播放
监听 waiting 事件，但别单独依赖它
waiting 是浏览器发出的缓冲告警，不是卡顿诊断书。直接显示“卡住了”容易误判：
- 低网速下它可能每秒触发多次，造成提示闪动
- 应叠加判断：
video.networkState === NETWORK_LOADING且buffered.end(0) - 配合
stalled（请求超时）才能区分是网络断了，还是解码跟不上
preload 和首帧策略决定等待起点
用户看到的第一秒白屏，往往源于预加载没到位：
- 设
preload="auto"（注意：iOS Safari 无视此值，仅 Wi-Fi 下可能生效） - 关键场景用
preload="metadata"+ 用户 hover 时调用video.load()，兼顾流量与响应 - 务必提供
poster图片——它不是装饰，是等待期间唯一的视觉锚点
服务端支持 Range 请求是缓冲流畅的前提
没有 Accept-Ranges: bytes 响应头，所有 seek、后台缓冲、断点续传都会退化为整文件重载：
- 用 DevTools Network 面板检查视频响应头，确认含
Accept-Ranges - Nginx 加
add_header Accept-Ranges bytes;，并确保 range 模块未被禁用 - 对象存储（如 OSS、S3）需开启“分段下载”功能，禁用 gzip 压缩 MP4 文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
