【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
主要是备用查看
下面把 <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 模板完整监听示例
<videoref="video":src="currentVideo"preload="auto"playsinlinemuted@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
http://www.smartapi.site/
