【混合开发】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 模板完整监听示例

html 复制代码

<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% 业务场景；其余按需加即可。

好用的开发工具

官网地址SmartApi

http://www.smartapi.site/