事件
Player 使用统一的事件系统封装了媒体事件、源切换事件与错误事件。推荐使用 player.on/player.once 订阅,并在组件卸载或销毁时移除。
ts
const off = player.on('play', () => console.log('playing'))
player.once('ended', () => console.log('finished'))
off() // 取消监听事件列表与触发时机
- 播放控制
play:调用play()成功后触发pause:调用pause()或媒体暂停后触发ended:媒体自然播放完毕
- 时间与进度
timeupdate:当前时间变更(已做 requestAnimationFrame 合帧)progress:缓冲进度更新(合帧后触发)durationchange:总时长变化
- 定位
seeking:调用seek()或用户拖动开始seeked:拖动结束
- 加载
loadstart:开始加载loadeddata:首帧可用loadedmetadata:元数据可用canplay:可开始播放(同时清除 loading/stalled 状态)canplaythrough:估算可无缓冲播放waiting:缓冲中stalled:数据请求停滞
- 音量与速率
volumechange:音量或静音状态变化ratechange:播放速率变化
- 源切换
sourcechange-start:调用setSource开始尝试新源sourcechange:引擎附加成功并切换完成sourcechange-failed:所有可用引擎均失败
- 引擎
engine-attach-failed:某个引擎的 attach 失败engine-error:引擎在播放过程中报错
- 全屏
enterfullscreen:进入全屏exitfullscreen:退出全屏
- 错误
error:统一错误事件(包含媒体、引擎、核心错误)fatal-error:fatal=true的严重错误(通常需要切源或提示用户)
推荐监听方式
- 使用
player.on(event, listener)获取取消函数;或在 React/Vue 生命周期中返回取消逻辑。 - 高频事件
timeupdate、progress已合帧,可直接用于 UI。 - 对致命错误监听
fatal-error,便于展示提示或重试按钮。
示例:收集关键事件
ts
import type { PlayerEventType, PlayerError } from '@iunify/player'
const watchEvents: PlayerEventType[] = [
'play', 'pause', 'ended',
'timeupdate', 'progress',
'sourcechange', 'sourcechange-failed',
'fatal-error'
]
const disposers = watchEvents.map(evt =>
player.on(evt, (payload) => {
if (evt === 'fatal-error') {
const err = payload as PlayerError
console.error('Fatal', err.code, err.message)
}
console.log(evt, payload)
})
)
// 清理
disposers.forEach(off => off())