import{_ as n,c as l,o as e,j as s,a,a7 as i}from"./chunks/framework.DXlgpajS.js";const Zs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1711766082000}'),p={name:"advanced/event.md"},h=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),t=s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),k=s("p",null,"监听事件:",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

只监听一次事件:

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

手动触发事件:

`,2),g=s("div",{className:"run-code"},"▶ Run Code",-1),o=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.emit('focus');

移除事件:

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),b=i(`
js
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

ready ​

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

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

restart ​

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

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i(`
js
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 ​

当播放器暂停时触发

`,3),v=s("div",{className:"run-code"},"▶ Run Code",-1),C=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

play ​

当播放器播放时触发

`,3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

hotkey ​

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

`,3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

destroy ​

当播放器销毁时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),P=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

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

focus ​

当播放器获得焦点时触发

`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

blur ​

当播放器失去焦点时触发

`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),w=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

dblclick ​

当播放器被双击时触发

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

click ​

当播放器被单击时触发

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

error ​

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

`,3),I=s("div",{className:"run-code"},"▶ Run Code",-1),z=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/404.mp4',
});

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

hover ​

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

`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

mousemove ​

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

`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

resize ​

当播放器尺寸变化时触发

`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

view ​

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

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

lock ​

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

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lock: true,
});

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

aspectRatio ​

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

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i(`
js
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 ​

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

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i(`
js
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 ​

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

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
});

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

flip ​

当播放器发生翻转时触发

`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i(`
js
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 ​

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

`,3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),es=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
});

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

fullscreenError ​

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

`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i(`
js
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 ​

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

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreenWeb: true,
});

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

mini ​

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

`,3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i(`
js
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 ​

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

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    pip: true,
});

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

screenshot ​

当播放器被截图时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),os=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    screenshot: true,
});

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

seek ​

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

`,3),ys=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

subtitleOffset ​

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

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i(`
js
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);
});

subtitleUpdate ​

当字幕更新时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

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

subtitleLoad ​

当字幕加载时触发

`,3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

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

subtitleSwitch ​

当字幕切换时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

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

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

info ​

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

`,3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

layer ​

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

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

loading ​

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

`,3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

mask ​

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

`,3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

subtitle ​

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

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

contextmenu ​

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

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

control ​

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

`,3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

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

setting ​

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

`,3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
});

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

muted ​

当静音的状态变化时触发

`,3),Hs=s("div",{className:"run-code"},"▶ Run Code",-1),Ws=i('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

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

video:canplaythrough ​

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

video:complete ​

OfflineAudioContext 渲染完成

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 ​

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

',43),Ls=[h,t,k,r,E,d,c,g,o,y,b,u,F,m,_,v,C,A,B,T,D,f,P,S,q,x,w,R,N,V,j,I,z,O,U,H,W,L,$,J,G,K,M,Q,X,Y,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,bs,us,Fs,ms,_s,vs,Cs,As,Bs,Ts,Ds,fs,Ps,Ss,qs,xs,ws,Rs,Ns,Vs,js,Is,zs,Os,Us,Hs,Ws];function $s(Js,Gs,Ks,Ms,Qs,Xs){return e(),l("div",null,Ls)}const si=n(p,[["render",$s]]);export{Zs as __pageData,si as default};