import{_ as n,c as e,o as l,j as s,a,a7 as i}from"./chunks/framework.DXlgpajS.js";const Zs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1711766082000}'),p={name:"en/advanced/event.md"},h=s("h1",{id:"example-events",tabindex:"-1"},[a("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[a("Player events are divided into two types, one is the video's "),s("code",null,"native events"),a(" (prefix "),s("code",null,"video:"),a("), the other is "),s("code",null,"custom events")],-1),k=s("p",null,"Listening to events:",-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');
});

Listen to an event only once:

`,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');
});

Manually trigger an event:

`,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');

Remove an event:

`,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);

For a full list of events, please refer to the following address:

artplayer/types/events.d.ts

ready ​

Triggered when the player is able to play for the first time

`,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 ​

Triggered when the player switches the address and is able to play

`,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 ​

Triggered when the player is paused

`,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 ​

Triggered when the player starts playing

`,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 ​

Triggered when a hotkey on the player is pressed

`,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 ​

Triggered when the player is destroyed

`,3),f=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('ready', () => {
    art.destroy();
});

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

focus ​

Triggered when the player gains focus

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

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

blur ​

Triggered when the player loses focus

`,3),x=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('blur', (event) => {
    console.info('blur', event);
});

dblclick ​

Triggered when the player is double-clicked

`,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 ​

Triggered when the player is clicked

`,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 ​

Triggered when an error occurs while the player is loading the video

`,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 ​

Triggered when the player is hovered or unhovered by the mouse

`,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 ​

Triggered when the mouse moves over the player

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

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

resize ​

Triggered when the player size changes

`,3),W=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 ​

Triggered when the player appears in the viewport

`,3),M=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('view', (state) => {
    console.info('view', state);
});

lock ​

On mobile, triggered when the locked state changes

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

Triggered when the aspect ratio of the player changes

`,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 ​

Triggered when the player automatically sets the height

`,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 ​

Triggered when the player automatically sets the size

`,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 ​

Triggered when the player flips

`,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 ​

Triggered when the player goes into full screen

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

Triggered when the player goes into full screen error

`,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 ​

Triggered when the player enters web fullscreen

`,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 ​

Triggered when the player enters mini mode

`,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 ​

Triggered when the player enters Picture-in-Picture mode

`,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 ​

Triggered when the player takes a 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 ​

Triggered when the player jumps in time

`,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 ​

Triggered when the subtitle offset occurs in the player

`,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 ​

Triggered when the subtitle updates

`,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 ​

Triggered when the subtitle loads

`,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 ​

Triggered when subtitles switch

`,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 ​

Triggered when the information panel is shown or hidden

`,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 ​

Triggered when a custom layer is shown or hidden

`,3),fs=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('layer', (state) => {
    console.log(state);
});

loading ​

Triggered when a loader is shown or hidden

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

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

mask ​

Triggered when a mask layer is shown or hidden

`,3),xs=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('mask', (state) => {
    console.log(state);
});

subtitle ​

Triggered when the subtitle layer is shown or hidden

`,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 ​

Triggered when the right-click menu is shown or hidden

`,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 ​

Triggered when the controller is shown or hidden

`,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 ​

Triggered when the settings panel is shown or hidden

`,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 ​

Triggered when the muted state changes

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

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

video:ended ​

The video has stopped because the media reached the end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

Metadata has been loaded

video:pause ​

Playback has been paused

video:play ​

Playback has started

video:playing ​

Playback is ready to start following a pause or delay due to lack of data

video:progress ​

Periodically triggered while the browser is loading resources

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek (frame skipping) operation has completed

video:seeking ​

A seek (frame skipping) operation has started

video:stalled ​

The user agent is trying to fetch media data, but the data unexpectedly has not appeared

video:suspend ​

Media data loading has been suspended

video:timeupdate ​

The time specified by the currentTime attribute has changed

video:volumechange ​

Volume changed

video:waiting ​

Playback has stopped due to temporarily missing data

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