主要是备用查看
下面把 <video> 元素 所有原生状态 + 生命周期事件 按时间线梳理，并给出「什么时候触发、常见用途、Vue 里怎么用」三列速查，复制即可用。
📺 视频生命周期总览图（先收藏再细看）
加载流程 → 网络 → 解码 → 渲染 → 播放 → 结束
| 阶段 | 事件 | 触发时机 | 常见用途 | Vue 监听示例 |
|---|---|---|---|---|
| 资源初始化 | loadstart |
开始请求视频文件 | 显示加载动画 | @loadstart="onLoadStart" |
| 元数据 | durationchange |
拿到时长（duration 从 NaN → 数字） |
更新总时长 | @durationchange="updateDuration" |
| 首帧可渲染 | loadeddata |
已解码到第一帧，可显示画面 | 隐藏封面遮罩 | @loadeddata="hideCover" |
| 可播放 | canplay |
缓冲足够，可以开始播放（可能还要缓冲） | 显示播放按钮 | @canplay="showPlayIcon" |
| 流畅播放 | canplaythrough |
浏览器认为「整个视频都能流畅播完」 | 自动播放前确认 | @canplaythrough="autoPlayIfWant" |
| 播放中 | timeupdate |
播放位置变化（约 250 ms 一次） | 更新进度条 | @timeupdate="updateProgress" |
| 暂停/播放 | play / pause |
调用 .play() 或 .pause() 后立即触发 |
UI 状态同步 | @play="isPaused=false" @pause="isPaused=true" |
| 结束 | ended |
播放到末尾 | 切下一条 / 重播 | @ended="nextVideo" |
| ** seeking ** | seeking |
正在跳转（currentTime 被设置） |
显示跳转提示 | @seeking="showSeeking" |
| 跳转完成 | seeked |
跳转完成 | 隐藏提示 | @seeked="hideSeeking" |
| 音量变化 | volumechange |
volume 或 muted 被改 |
更新音量图标 | @volumechange="updateVolumeIcon" |
| 全屏 | fullscreenchange |
进入/退出全屏 | 调整布局 | @fullscreenchange="onFullscreenChange" |
| 错误 | error |
网络/解码/格式错误 | 提示用户重试 | @error="onError" |
| 等待缓冲 | waiting |
缓冲不足，播放暂停 | 显示缓冲圈 | @waiting="showBuffer" @canplay="hideBuffer" |
✅ Vue 模板完整监听示例
<video
ref="video"
:src="currentVideo"
preload="auto"
playsinline
muted
@loadstart="onLoadStart"
@durationchange="updateDuration"
@loadeddata="hideCover"
@canplay="showPlayIcon"
@canplaythrough="autoPlayIfWant"
@timeupdate="updateProgress"
@play="isPaused=false"
@pause="isPaused=true"
@ended="nextVideo"
@waiting="showBuffer"
@error="onError"
></video>
✅ JS 常用属性速查
| 属性 | 说明 | 只读？ |
|---|---|---|
video.duration |
总时长（秒） | ✅ |
video.currentTime |
当前播放位置（可读写） | ❌ |
video.paused |
是否暂停 | ✅ |
video.ended |
是否播放完毕 | ✅ |
video.buffered |
已缓冲时间范围对象 | ✅ |
video.readyState |
就绪状态 0-4（见下表） | ✅ |
✅ readyState 枚举
| 值 | 含义 |
|---|---|
| 0 | HAVE_NOTHING - 没有数据 |
| 1 | HAVE_METADATA - 拿到元数据 |
| 2 | HAVE_CURRENT_DATA - 当前帧可用 |
| 3 | HAVE_FUTURE_DATA - 可以播放下一帧 |
| 4 | HAVE_ENOUGH_DATA - 可以流畅播放到底 |
✅ 一句话总结
把 loadeddata（首帧）、canplay（可播）、ended（播完）、timeupdate（进度）、error（出错）五个事件先监听，就能覆盖 90% 业务场景；其余按需加即可。
好用的开发工具
推荐理由
postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
5、postman会导致电脑卡顿，而且使用的功能越多越慢，尤其是win电脑，太让人郁闷了
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求
SmartApi
win版本不大于1M；运行消耗性能极低
macos 版本不大于100M；运行消耗性能极低
非常适合开发设备或性能有限的开发环境
SmartApi只为开发服务
官网地址SmartApi
