实例事件

播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件

监听事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('video:canplay', () => {
    console.info('video:canplay');
});

只监听一次事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.once('video:canplay', () => {
    console.info('video:canplay');
});

手动触发事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.emit('focus');

移除事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

const onReady = () => {
    console.info('ready');
    art.off('ready', onReady);
}

art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

订阅与同步派发

播放器继承 Artplayer.Emitter。on(name, callback, ctx?)、once、off、emit(name, ...args) 都返回当前实例；它们不是 DOM addEventListener，也不是返回 Promise 的消息队列。

on 按注册顺序保存监听器，重复注册同一函数会重复调用。ctx 原样作为普通函数的 this；未传时以 undefined 调用，不自动绑定播放器，箭头函数仍使用词法 this。
emit 同步遍历派发开始时的监听器快照。过程中新增的监听器不参加这次派发；移除的普通监听器若已在快照里，仍会执行。回调参数按原引用传递，回调返回值被忽略。
once 在调用用户回调前移除，并防止嵌套派发重复消费同一注册；即使回调抛错也已消费。off(name, callback) 移除该函数的全部普通/once注册，不按ctx区分；off(name) 移除该名称的全部监听器。
回调同步抛错会终止当次后续监听器并沿调用栈传播；async回调的Promise不被等待，调用者应处理异步失败。error只是普通事件名，不具备Node EventEmitter的特殊错误规则。
e是延迟创建的监听器表，保存fn和ctx，属于可见的历史接口；新建独立Emitter时可能不存在。用on/off维护订阅，不直接修改这个内部表。数字名称与对应字符串共享对象key，Symbol是独立key；根播放器类型的旧名称重载更窄，准确入口/独立泛型Emitter可表达更多名称。

手动emit只发通知，不替代播放器方法；伪造内置事件还可能触发核心内部监听器。销毁会清理核心拥有的DOM/内部订阅，但不等于清空用户事件表；用户保留实例时仍应移除不再需要的订阅。与DOM事件资源管理器 art.events 的区别见高级属性指南。

原生事件转发

以下默认媒体事件以 video: 为前缀转发，参数是原始Event对象，浏览器/代理决定它们何时发生：

abort、canplay、canplaythrough、durationchange、emptied、ended、error、loadeddata、loadedmetadata、loadstart、pause、play、playing、progress、ratechange、seeked、seeking、stalled、suspend、timeupdate、volumechange、waiting。

video:error 的参数不是MediaError或Error实例；需要时读取 art.video.error。旧类型保留 video:complete 和 video:encrypted，但默认config.events没有这两个名称，核心不会自动转发。若适配器需要扩展，须自行建立转发或在实例构造前配置事件清单；类型中有名称不证明运行时会发出事件。

全局转发来自播放器当前绑定的document/window，每次携带原始Event：

前缀	默认名称
`document:`	click、mouseup、keydown、touchend、touchcancel、touchmove、mousemove、pointerup、contextmenu、pointermove、visibilitychange、webkitfullscreenchange
`window:`	resize、scroll、orientationchange

它们不是仅在播放器内触发；可通过events.bindGlobalEvents重绑定到所属窗口。销毁后停止原生转发。document:keydown等参数实际保留KeyboardEvent/MouseEvent的原生子类型；转发不保证某个浏览器会产生每一种事件。

自定义事件参数与阶段

内置监听器与用户监听器共用同步派发机制；构造时先注册的内部监听器可在原生转发过程中先发出自定义事件。不能为所有代理/浏览器规定统一的跨事件总顺序。

媒体与生命周期

事件	参数与实际阶段
`ready`	无参数；首个处理成功的video:canplay中设置isReady后发出一次，不等待异步插件、字幕或第三方SDK
`restart`	本次提交的URL；已有URL且实例ready后，实际媒体地址发生变化的当前切源操作在canplay时发出。不保证相同URL赋值会发出
`play`	无参数；art.play等待媒体play成功后，在操作仍有效时发出。直接video.play不自动产生这个自定义事件；原生video:play仍可发出
`pause`	无参数；art.pause调用媒体pause并更新提示后同步发出，即使媒体原本已暂停。与video:pause不是同一事件
`destroy`	无参数；原生监听/资源和模板清理、实例登记移除及isDestroy置true后发出。不要假定回调中DOM仍挂载；destroy(false)另行控制保留DOM
`error`	原始错误值、当前重试次数；重连等待后提交重试时发出，不是每次原生错误或所有异步失败的统一通道
`seek`	赋值后的currentTime、原始请求时间（可为数字或字符串）；不是原生seeked完成通知
`muted`	传给art.muted的布尔值；重复赋值仍可触发。直接改video.muted以原生video:volumechange观察
`screenshot`	PNG data URI；截图方法得到图像并尝试触发下载后发出，不证明文件已保存。getDataURL/getBlobUrl本身不发此事件
`airplay`	无参数；可用的原生选择器调用后发出，不表示远端已连接或开始播放
`raf`	无参数；构造前USE_RAF启用时，播放中的帧循环发出，不是视频解码帧回调

界面与输入

事件	参数与实际阶段
`info`、`layer`、`loading`、`mask`、`subtitle`、`contextmenu`、`control`、`setting`	show设置的布尔值；重复设置相同值也可触发，不是动画完成事件
`focus` / `blur`	document click/contextmenu的原始事件，按路径是否包含播放器区分；不是DOM focus/blur事件，状态不变时也可发出
`click` / `dblclick`	视频节点点击事件；双击由DBCLICK_TIME窗口内计数得到，第一次click已立即发出，之后才执行播放/全屏动作
`hover`	是否进入、原始mouseenter/mouseleave事件
`mousemove`	播放器节点的MouseEvent，不是节流后的document坐标
`hotkey`	KeyboardEvent；匹配的快捷键回调执行后发出，受焦点/输入过滤约束
`keydown`	KeyboardEvent；桌面快捷键分发之后仍可发出，即使没有匹配键或播放器未聚焦；移动端不会自动安装这条快捷键分发。需要原始全局事件用document:keydown
`resize`	无参数；窗口防抖、元数据/显示模式/主动布局等路径会发出，不只来自window:resize
`view`	是否与视口相交；经滚动leading节流，不是元素完全可见或遮挡检测
`lock`	锁定布尔值；内置锁插件更新状态后发出，不是直接赋值isLock的观察器
`setBar`	类型、比例、可选原始鼠标/触摸事件。内置类型loaded/played/hover；程序刷新和键盘路径可能没有第三参数。它是进度UI更新协议，不是播放完成通知

尺寸、显示与字幕

事件	参数与实际阶段
`aspectRatio` / `flip`	setter规范空值后的字符串；不保证它一定来自内置选择列表
`autoHeight` / `autoSize`	高度数值 / {width, height}；有效媒体尺寸下应用布局后发出，无法计算时不发
`fullscreen` / `fullscreenWeb` / `mini` / `pip`	状态布尔值；对应显示adapter观察或完成转换时发出。重复赋值是否发出依模式而异，不是请求成功的通用Promise替代品
`fullscreenError`	所属原生全屏错误事件/adapter提供的值；请求Promise拒绝也可能只进入提示，不能依赖它收集所有全屏失败
`subtitleOffset`	原始请求偏移；实际存储值会限制到[-10,10]，没有cue时不发
`subtitleBeforeUpdate` / `subtitleAfterUpdate`	cue数组，不是单个cue；渲染前/后同步通知，没有活动cue时两者都不发
`subtitleLoad`	当前cue数组、字幕管理器当前选项（可能为null）；原生track加载完成，不是switch Promise的别名

TypeScript事件视图

根入口保留历史事件声明及自定义扩展：例如video:error旧写为Error，字幕更新旧写为单个VTTCue。根入口另有SubtitleUpdateEvents数组重载；需要稳定的准确上下文推导时使用 artplayer/runtime，其中原生媒体参数为Event、字幕为SubtitleCue数组、error/fullscreenError为unknown、seek第二参数允许字符串。未知自定义事件保留unknown数组，并不会校验运行时载荷。通用Emitter可以显式指定自己的事件tuple：

import Artplayer from 'artplayer/runtime';
import type { Events, SubtitleCue } from 'artplayer/runtime';

const bus = new Artplayer.Emitter<{ progress: [value: number] }>();
const context = { total: 0 };
bus.on('progress', function (value) { this.total += value; }, context);
bus.emit('progress', 2);

const art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4' });
art.on('video:error', (event: Event) => console.info(event.type));
art.on('subtitleBeforeUpdate', (cues: SubtitleCue[]) => console.info(cues.length));
const seekArgs: Events['seek'] = [0, '0'];
void seekArgs;

`ready`

当播放器首次可以播放器时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    console.info('ready');
});

`restart`

当播放器切换地址后并可以播放时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.url = '/assets/sample/video.mp4'
});

art.on('restart', (url) => {
    console.info('restart', url);
});

`pause`

当播放器暂停时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('pause', () => {
    console.info('pause');
});

`play`

当播放器播放时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('play', () => {
    console.info('play');
});

`hotkey`

当播放器热键被按下时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('hotkey', (event) => {
    console.info('hotkey', event);
});

`destroy`

当播放器销毁时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.destroy();
});

art.on('destroy', () => {
    console.info('destroy');
});

`focus`

当播放器获得焦点时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('focus', (event) => {
    console.info('focus', event);
});

`blur`

当播放器失去焦点时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('blur', (event) => {
    console.info('blur', event);
});

`dblclick`

当播放器被双击时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('dblclick', (event) => {
    console.info('dblclick', event);
});

`click`

当播放器被单击时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('click', (event) => {
    console.info('click', event);
});

`error`

当播放器加载视频发生错误时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/404.mp4',
});

art.on('error', (error, reconnectTime) => {
    console.info(error, reconnectTime);
});

`hover`

当播放器被鼠标移出或者移入时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('hover', (state, event) => {
    console.info('hover', state, event);
});

`mousemove`

当播放器被鼠标经过时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('mousemove', (event) => {
    console.info('mousemove', event);
});

`resize`

当播放器尺寸变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('resize', () => {
    console.info('resize');
});

`view`

当播放器出现在视口时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('view', (state) => {
    console.info('view', state);
});

`lock`

在移动端，当锁定的状态发生变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lock: true,
});

art.on('lock', (state) => {
    console.info('lock', state);
});

`aspectRatio`

当播放器长宽比变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    aspectRatio: true,
    setting: true,
});

art.on('aspectRatio', (aspectRatio) => {
    console.info('aspectRatio', aspectRatio);
});

`autoHeight`

当播放器自动设置高度时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.autoHeight();
});

art.on('autoHeight', (height) => {
    console.info('autoHeight', height);
});

`autoSize`

当播放器自动设置尺寸时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
});

art.on('autoSize', () => {
    console.info('autoSize');
});

`flip`

当播放器发生翻转时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    flip: true,
    setting: true,
});

art.on('flip', (flip) => {
    console.info('flip', flip);
});

`fullscreen`

当播放器发生窗口全屏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
});

art.on('fullscreen', (state) => {
    console.info('fullscreen', state);
});

`fullscreenError`

当播放器发生窗口全屏错误时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
	art.fullscreen = true;
});

art.on('fullscreenError', (event) => {
    console.info('fullscreenError', event);
});

`fullscreenWeb`

当播放器发生网页全屏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreenWeb: true,
});

art.on('fullscreenWeb', (state) => {
    console.info('fullscreenWeb', state);
});

`mini`

当播放器进入迷你模式时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.mini = true;
});

art.on('mini', (state) => {
    console.info('mini', state);
});

`pip`

当播放器进入画中画时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    pip: true,
});

art.on('pip', (state) => {
    console.info('pip', state);
});

`screenshot`

当播放器被截图时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    screenshot: true,
});

art.on('screenshot', (dataUri) => {
    console.info('screenshot', dataUri);
});

`seek`

当播放器发生时间跳转时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('seek', (currentTime) => {
    console.info('seek', currentTime);
});

`subtitleOffset`

当播放器发生字幕偏移时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitleOffset: true,
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
    setting: true,
});

art.on('subtitleOffset', (offset) => {
    console.info('subtitleOffset', offset);
});

`subtitleBeforeUpdate`

当字幕更新前触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleBeforeUpdate', (cues) => {
    console.info('subtitleBeforeUpdate', cues);
});

`subtitleAfterUpdate`

当字幕更新后触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleAfterUpdate', (cues) => {
    console.info('subtitleAfterUpdate', cues);
});

`subtitleLoad`

当字幕加载时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleLoad', (option, cues) => {
    console.info('subtitleLoad', cues, option);
});

`info`

当信息面板显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('info', (state) => {
    console.log(state);
});

`layer`

当自定义层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('layer', (state) => {
    console.log(state);
});

`loading`

当加载器显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('loading', (state) => {
    console.log(state);
});

`mask`

当遮罩层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('mask', (state) => {
    console.log(state);
});

`subtitle`

当字幕层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('subtitle', (state) => {
    console.log(state);
});

`contextmenu`

当右键菜单显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('contextmenu', (state) => {
    console.log(state);
});

`control`

当控制器显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('control', (state) => {
    console.log(state);
});

`setting`

当设置面板显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
});

art.on('setting', (state) => {
    console.log(state);
});

`muted`

当静音的状态变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('muted', (state) => {
    console.log(state);
});

`keydown`

监听来自 document 的 keydown 事件

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('keydown', (event) => {
    console.log(event.code);
});

`video:canplay`

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

`video:canplaythrough`

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

`video:complete`

历史类型保留的名称，默认视频事件清单不转发此事件。视频播放结束使用 video:ended。

`video:durationchange`

duration 属性的值改变时触发

`video:emptied`

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

`video:ended`

视频停止播放，因为 media 已经到达结束点

`video:error`

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

`video:loadeddata`

media 中的首帧已经完成加载

`video:loadedmetadata`

已加载元数据

`video:pause`

播放已暂停

`video:play`

播放已开始

`video:playing`

由于缺乏数据而暂停或延迟后，播放准备开始

`video:progress`

在浏览器加载资源时周期性触发

`video:ratechange`

播放速率发生变化

`video:seeked`

跳帧（seek）操作完成

`video:seeking`

跳帧（seek）操作开始

`video:stalled`

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

`video:suspend`

媒体数据加载已暂停

`video:timeupdate`

currentTime 属性指定的时间发生变化

`video:volumechange`

音量发生变化

`video:waiting`

由于暂时缺少数据，播放已停止

实例事件 ​

订阅与同步派发 ​

原生事件转发 ​

自定义事件参数与阶段 ​

媒体与生命周期 ​

界面与输入 ​

尺寸、显示与字幕 ​

TypeScript事件视图 ​

ready ​

restart ​

pause ​

play ​

hotkey ​

destroy ​

focus ​

blur ​

dblclick ​

click ​

error ​

hover ​

mousemove ​

resize ​

view ​

lock ​

aspectRatio ​

autoHeight ​

autoSize ​

flip ​

fullscreen ​

fullscreenError ​

fullscreenWeb ​

mini ​

pip ​

screenshot ​

seek ​

subtitleOffset ​

subtitleBeforeUpdate ​

subtitleAfterUpdate ​

subtitleLoad ​

info ​

layer ​

loading ​

mask ​

subtitle ​

contextmenu ​

control ​

setting ​

muted ​

keydown ​

video:canplay ​

video:canplaythrough ​

video:complete ​

video:durationchange ​

video:emptied ​

video:ended ​

video:error ​

video:loadeddata ​

video:loadedmetadata ​

video:pause ​

video:play ​

video:playing ​

video:progress ​

video:ratechange ​

video:seeked ​

video:seeking ​

video:stalled ​

video:suspend ​

video:timeupdate ​

video:volumechange ​

video:waiting ​

实例事件

订阅与同步派发

原生事件转发

自定义事件参数与阶段

媒体与生命周期

界面与输入

尺寸、显示与字幕

TypeScript事件视图

`ready`

`restart`

`pause`

`play`

`hotkey`

`destroy`

`focus`

`blur`

`dblclick`

`click`

`error`

`hover`

`mousemove`

`resize`

`view`

`lock`

`aspectRatio`

`autoHeight`

`autoSize`

`flip`

`fullscreen`

`fullscreenError`

`fullscreenWeb`

`mini`

`pip`

`screenshot`

`seek`

`subtitleOffset`

`subtitleBeforeUpdate`

`subtitleAfterUpdate`

`subtitleLoad`

`info`

`layer`

`loading`

`mask`

`subtitle`

`contextmenu`

`control`

`setting`

`muted`

`keydown`

`video:canplay`

`video:canplaythrough`

`video:complete`

`video:durationchange`

`video:emptied`

`video:ended`

`video:error`

`video:loadeddata`

`video:loadedmetadata`

`video:pause`

`video:play`

`video:playing`

`video:progress`

`video:ratechange`

`video:seeked`

`video:seeking`

`video:stalled`

`video:suspend`

`video:timeupdate`

`video:volumechange`

`video:waiting`