import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const Zs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1711703765000}'),e={name:"en/advanced/event.md"},r=s("h1",{id:"example-events",tabindex:"-1"},[n("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[n("Player events are divided into two types, one is the video's "),s("code",null,"native events"),n(" (prefix "),s("code",null,"video:"),n("), the other is "),s("code",null,"custom events")],-1),c=s("p",null,"Listening to events:",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
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),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
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),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.emit('focus');

Remove an event:

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