html5的和元素通过事件系统精准响应媒体生命周期状态，涵盖加载就绪、播放控制、错误处理及时间交互四大类事件，需结合readystate合理监听以构建可靠媒体体验。
HTML5 的 <video></video> 和 <audio></audio> 元素不仅提供播放能力，还通过一套完整的事件系统让开发者能精准感知和响应媒体生命周期中的每一个关键状态。掌握这些事件不是为了堆砌监听器，而是为了构建可靠、可交互、有反馈的媒体体验。
核心加载与就绪事件
这类事件反映媒体资源从开始请求到具备播放条件的过程，是初始化控制逻辑的基础。
- loadstart：浏览器刚发起网络请求时触发，适合显示“正在加载”提示
-
loadedmetadata：元数据（如时长、宽高、编码信息）加载完成，此时
duration、videoWidth等属性才有效 - loadeddata：第一帧图像或音频帧已解码可用，可触发封面图淡出或预览帧渲染
- canplay：缓冲了足够帧数，可开始播放但可能后续卡顿；常用于启用播放按钮
- canplaythrough：预计能连续播完不中断（基于当前下载速率判断），适合移除加载遮罩或启动自动播放逻辑
播放状态变化事件
用户操作或播放自然推进会触发这些事件，是同步 UI 状态、记录行为、执行副作用的关键节点。
- play：播放被显式启动（包括自动播放成功后），注意它不等同于实际画面/声音输出
-
playing：媒体真正开始呈现内容（首帧渲染/音频输出），比
play更可靠地表示“已动起来” - pause：用户或脚本暂停播放，适合保存当前播放进度或释放资源
- ended：自然播放至末尾，常用于自动循环、跳转下一集或显示推荐内容
- ratechange：播放速度改变（如 0.5x / 2x），可用于同步字幕或更新倍速显示
错误与中断事件
网络波动、格式不支持、权限拒绝等异常都会触发对应事件，是提升健壮性的必处理环节。
-
error：最通用的错误入口，需检查
video.error.code（如 MEDIA_ERR_ABORTED、MEDIA_ERR_NETWORK）并给出明确反馈 - abort：用户主动中止加载（如切换视频源），不同于网络错误
-
emptied：媒体元素被重置（如调用
load()或 src 改变），所有状态清空 - stalled：浏览器想下载却收不到数据，可能是网络卡顿或服务端问题，适合触发重试或降级提示
-
waiting：因缓冲不足暂停播放，可结合
buffered属性判断是否需要加载更多
时间与交互相关事件
涉及播放位置变更、音量调节等用户直接干预行为，支撑进度条、画中画、音量记忆等功能。
-
seeking：用户拖动进度条或脚本设置
currentTime时触发，表示定位开始 - seeked：定位完成且新位置帧已准备就绪，适合更新当前时间显示或刷新缩略图
- timeupdate：播放过程中高频触发（通常每 200–250ms），用于实时更新进度条、同步字幕
- volumechange：音量或静音状态改变时触发，可用于持久化用户偏好设置
- durationchange：媒体总时长更新（如流媒体初始为 NaN，加载后确定），需重新计算进度比例
不复杂但容易忽略：多数事件只在特定 readyState 下有意义，比如 duration 在 loadedmetadata 前不可靠；监听应优先使用 addEventListener 而非内联 onxxx 属性，便于统一管理和移除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
