Common events

The event of the player is divided into two, a native event of a video, and another is a custom event. The native event comes from Video Elements, is the original event of the Video Element, in order to distinguish it and custom events, the native event adds a prefix video:

Native event

For more information, please read Mozilla Video Events

Event name	Fired When
video:canplay	The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
video:canplaythrough	The browser estimates it can play the media up to its end without stopping for content buffering.
video:complete	The rendering of an OfflineAudioContext is terminated.
video:durationchange	The duration attribute has been updated.
video:emptied	The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
video:ended	Playback has stopped because the end of the media was reached.
video:loadeddata	The first frame of the media has finished loading.
video:loadedmetadata	The metadata has been loaded.
video:pause	Playback has been paused.
video:play	Playback has begun.
video:playing	Playback is ready to start after having been paused or delayed due to lack of data.
video:progress	Fired periodically as the browser loads a resource.
video:ratechange	The playback rate has changed.
video:seeked	A seek operation completed.
video:seeking	A seek operation began.
video:stalled	The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
video:suspend	Media data loading has been suspended.
video:timeupdate	The time indicated by the currentTime attribute has been updated.
video:volumechange	The volume has changed.
video:waiting	Playback has stopped because of a temporary lack of data

▶ Run Code

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

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

Custom event

ready

Fired when the player is initialized, and the video can be played

▶ Run Code

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

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

play

Fired after the video is played

▶ Run Code

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

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

pause

Fired after the video is pause

▶ Run Code

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

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

seek

Fired when the video is time jump

▶ Run Code

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

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

art.on('ready', (...args) => {
    art.seek = 5;
});

Tip

Set the art.currentTime will not fired the seek event

volume

Fired when the video volume changes

▶ Run Code

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

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

art.on('ready', (...args) => {
    art.volume = 0.5;
});

destroy

Fired when the player instance is destroyed

▶ Run Code

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

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

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

focus

Fired when the player gets focus, if you click on the player

▶ Run Code

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

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

blur

Fired when the player loses focus, such as the area other than the player

▶ Run Code

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

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

hover

Fired when mouse moves player

▶ Run Code

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

art.on('hover', (state) => {
    // state for true, the mouse moves from the outside to the player
    // state for false, the mouse moves from the player to the outside
    console.info(state);
});

resize

Fired when the player is changed

▶ Run Code

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

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

mousemove

Fired when the mouse is played, this and hover is different, it will trigger multiple times

▶ Run Code

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

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

url

Fired when the video url changes

▶ Run Code

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

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

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

fullscreen

Fired when the player window is full screen

▶ Run Code

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

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

fullscreenWeb

Fired when player webpage full screen

▶ Run Code

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

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

hotkey

Trigger when hotkey are used

▶ Run Code

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

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