html5视频播放具有明确的生命周期事件链：从loadstart到ended共12个关键事件，覆盖加载、播放、异常三阶段，需按阶段精准监听以实现加载提示、错误降级、统计与体验优化。
HTML5 视频播放不是“点开就播”，而是一套有明确阶段、可监听、可干预的生命周期。掌握从 loadstart 到 ended 的关键事件，才能准确控制加载提示、错误降级、播放统计和用户体验。
加载阶段：从请求到可播
这是用户点击播放前的幕后过程，决定是否能顺利进入播放。
-
loadstart：浏览器刚发起资源请求，此时
video.src已设置但尚未拿到任何数据。适合显示“正在连接…”提示。 -
durationchange：视频时长由
NaN变为具体数值（如528.98），说明服务端已响应并返回了元数据头。注意：它可能触发多次（如动态码率切换）。 -
loadedmetadata：宽高、轨道、帧率等元信息就绪。此时可安全读取
video.videoWidth和video.duration。 - loadeddata：第一帧图像数据已解码完成，画面可首次渲染（但不一定能连续播放）。
-
canplay：浏览器判断当前缓冲区足够播放几秒——可调用
play()，但中途可能因卡顿再次触发 waiting。 - canplaythrough：浏览器预估能一路播完不中断（依赖网络与缓存）。更适合作为“准备就绪”的信号，比如隐藏 loading 动画。
播放与交互阶段：控制与反馈
用户操作和播放状态变化在此集中体现，是 UI 同步和行为响应的核心。
-
play：播放被显式触发（
play()或用户点击），包括 autoplay 自动启动。注意：它不保证立即播放（可能因策略被阻断）。 - playing：视频真正开始渲染帧，意味着已脱离暂停/等待状态。比 play 更可靠地表示“正在动”。
-
pause：用户或代码主动暂停。此时
video.paused === true，但时间仍在停留。 - waiting：播放中因缓冲不足暂停，常伴随 progress 或 timeupdate 中断。适合展示“缓冲中”状态。
-
seeking / seeked：拖拽进度条时触发。前者表示查找开始，后者表示定位完成（
video.currentTime已更新）。 - timeupdate：播放时间变化时高频触发（通常每 250ms 左右），用于更新进度条、字幕同步、打点记录等。
异常与辅助事件：提升健壮性
真实环境中网络、编码、权限问题频发，这些事件帮你兜底和优化体验。
-
error：资源加载失败（404、跨域、解码错误等）。
video.error包含具体错误码，需结合 loadstart 判断是初始加载还是播放中出错。 - stalled：浏览器尝试获取数据但长时间无响应（如 CDN 节点失联），比 progress 长时间不触发更早预警。
- abort：用户主动取消加载（如快速切页），非错误但需清理临时状态。
- volumechange / ratechange：音量或倍速调整后触发，用于持久化用户偏好。
-
ended：自然播完且
video.ended === true。注意：它不触发于currentTime手动设为末尾，仅当播放引擎抵达终点。
实用建议：避免常见误用
事件不是越多越好，关键是选对时机、避免重复、及时清理。
- 不要在 canplay 后立刻调用
play()—— 移动端自动播放策略可能拒绝，应监听 play 成功后再做后续动作。 - progress 会高频触发，做 UI 更新时建议防抖或节流，避免重绘压力。
- durationchange 和 loadedmetadata 都涉及时长，但前者更早、更频繁；后者更稳定，适合初始化 UI。
- 监听多个事件时，用
once: true选项（如addEventListener('loadeddata', handler, { once: true })）可避免重复绑定。 - 页面卸载前记得移除事件监听器，尤其 timeupdate 这类持续触发的事件，防止内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
