ArtPlayer/docs/document/events.md

Video native event

You can use all the native events of video directly: MDN web docs - Media events.

But be careful to add the video prefix in front of the event:

Run Code

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

art.on('video:canplay', function (event) {
    console.info(event);
});

art.on('video:volumechange', function (event) {
    console.info(event);
});

Player custom event

Run Code

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

art.on('ready', function (args) {
    console.info('The player can play');
});

Event	Description	Parameter
ready	When the video can be played	undefined
play	When the video play	undefined
pause	When the video pause	undefined
seek	When the video seek	Video current time
volume	When the video volume change	Video volume value
destroy	When the player is destroyed	undefined
focus	When the player gets focus	undefined
blur	When the player loses focus	undefined
hover	When the mouse is moved into or out	Whether moved into
resize	When the player resize	Player size
mousemove	When the mouse moves over the player	undefined
aspectRatio	When aspect ratio change	Aspect ratio
url	When the video url change	Video url
autoSize	When the player auto size change	Player size
flip	When the player flip change	Flip name
fullscreen	When the full screen change	Whether full screen
fullscreenWeb	When the web full screen change	Whether web full screen
fullscreenRotate	When the rotate full screen change	Whether rotate full screen
pip	When the picture in picture change	Whether in pip
mini	When the mini player change	Whether in mini player
playbackRate	When playback rate change	Playback rate
screenshot	When a screenshot	Image data uri
switch	When switching video url	Video url
loop	When the interval loop change	Interval arrary
subtitleUpdate	When the subtitles change	Current subtitle text
subtitleSwitch	When switching subtitles	Current subtitle url
subtitleLoad	When the subtitles loaded	Current subtitle url
subtitle	When displaying subtitles	Whether to show
notice	When displaying notice	Whether to show
mask	When displaying mask	Whether to show
loading	When displaying loading	Whether to show
layer	When displaying layer	Whether to show
info	When displaying info	Whether to show
setting	When displaying setting	Whether to show
contextmenu	When displaying contextmenu	Contextmenu configuration
control	When displaying control	Control configuration
hotkey	When the hotkey is triggered	Hotkey event object