Instance Events Permalink to "Instance Events"
Player events are divided into two types: native events of the video (prefixed with video:), and custom events.
Listening to events:
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('video:canplay', () => {
console.info('video:canplay');
});Listening to an event only once:
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.once('video:canplay', () => {
console.info('video:canplay');
});Manually triggering an event:
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.emit('focus');Removing an event:
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 complete list of events, please refer to:
ready Permalink to "`ready`"
Triggered when the player is ready for the first time.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info('ready');
});restart Permalink to "`restart`"
Triggered when the player switches URLs and becomes ready to play.
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 Permalink to "`pause`"
Triggered when the player is paused.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('pause', () => {
console.info('pause');
});play Permalink to "`play`"
Triggered when the player starts playing.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('play', () => {
console.info('play');
});hotkey Permalink to "`hotkey`"
Triggered when a player hotkey is pressed.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('hotkey', (event) => {
console.info('hotkey', event);
});destroy Permalink to "`destroy`"
Triggered when the player is destroyed.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
art.destroy();
});
art.on('destroy', () => {
console.info('destroy');
});focus Permalink to "`focus`"
Triggered when the player gains focus.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('focus', (event) => {
console.info('focus', event);
});blur Permalink to "`blur`"
Triggered when the player loses focus.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('blur', (event) => {
console.info('blur', event);
});dblclick Permalink to "`dblclick`"
Triggered when the player is double-clicked.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('dblclick', (event) => {
console.info('dblclick', event);
});click Permalink to "`click`"
Triggered when the player is clicked.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('click', (event) => {
console.info('click', event);
});error Permalink to "`error`"
Triggered when an error occurs while the player is loading a video.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/404.mp4',
});
art.on('error', (error, reconnectTime) => {
console.info(error, reconnectTime);
});hover Permalink to "`hover`"
Triggered when the mouse enters or leaves the player.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('hover', (state, event) => {
console.info('hover', state, event);
});mousemove Permalink to "`mousemove`"
Triggered when the mouse moves over the player.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('mousemove', (event) => {
console.info('mousemove', event);
});resize Permalink to "`resize`"
Triggered when the player's dimensions change.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('resize', () => {
console.info('resize');
});view Permalink to "`view`"
Triggered when the player enters the viewport.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('view', (state) => {
console.info('view', state);
});lock Permalink to "`lock`"
Triggered when the lock state changes on mobile devices.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
lock: true,
});
aspectRatio Permalink to "`aspectRatio`"
Triggered when the player's aspect ratio changes.
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 Permalink to "`autoHeight`"
Triggered when the player's height is automatically set.
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 Permalink to "`autoSize`"
Triggered when the player's size is automatically set.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoSize: true,
});
art.on('autoSize', () => {
console.info('autoSize');
});flip Permalink to "`flip`"
Triggered when the player is flipped.
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 Permalink to "`fullscreen`"
Triggered when the player enters or exits windowed fullscreen mode.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreen: true,
});
art.on('fullscreen', (state) => {
console.info('fullscreen', state);
});fullscreenError Permalink to "`fullscreenError`"
Triggered when a windowed fullscreen error occurs.
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 Permalink to "`fullscreenWeb`"
Triggered when the player enters or exits web fullscreen mode.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreenWeb: true,
});
art.on('fullscreenWeb', (state) => {
console.info('fullscreenWeb', state);
});mini Permalink to "`mini`"
Triggered when the player enters or exits mini mode.
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 Permalink to "`pip`"
Triggered when the player enters or exits Picture-in-Picture mode.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
pip: true,
});
art.on('pip', (state) => {
console.info('pip', state);
});screenshot Permalink to "`screenshot`"
Triggered when the player takes a screenshot.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
screenshot: true,
});
art.on('screenshot', (dataUri) => {
console.info('screenshot', dataUri);
});seek Permalink to "`seek`"
Triggered when the player performs a time seek.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('seek', (currentTime) => {
console.info('seek', currentTime);
});subtitleOffset Permalink to "`subtitleOffset`"
Triggered when the subtitle offset changes in the player.
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);
});subtitleBeforeUpdate Permalink to "`subtitleBeforeUpdate`"
Triggered before subtitles are updated.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
},
});
art.on('subtitleBeforeUpdate', (cues) => {
console.info('subtitleBeforeUpdate', cues);
});subtitleAfterUpdate Permalink to "`subtitleAfterUpdate`"
Triggered after subtitles are updated.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
},
});
art.on('subtitleAfterUpdate', (cues) => {
console.info('subtitleAfterUpdate', cues);
});subtitleLoad Permalink to "`subtitleLoad`"
Triggered when subtitles are loaded.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
},
});
art.on('subtitleLoad', (option, cues) => {
console.info('subtitleLoad', cues, option);
});info Permalink to "`info`"
Triggered when the info panel is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('info', (state) => {
console.log(state);
});layer Permalink to "`layer`"
Triggered when a custom layer is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('layer', (state) => {
console.log(state);
});loading Permalink to "`loading`"
Triggered when the loader is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('loading', (state) => {
console.log(state);
});mask Permalink to "`mask`"
Triggered when the mask layer is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('mask', (state) => {
console.log(state);
});subtitle Permalink to "`subtitle`"
Triggered when the subtitle layer is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('subtitle', (state) => {
console.log(state);
});contextmenu Permalink to "`contextmenu`"
Triggered when the context menu is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('contextmenu', (state) => {
console.log(state);
});control Permalink to "`control`"
Triggered when the control bar is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('control', (state) => {
console.log(state);
});setting Permalink to "`setting`"
Triggered when the settings panel is shown or hidden.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
});
muted Permalink to "`muted`"
Triggered when the muted state changes.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('muted', (state) => {
console.log(state);
});keydown Permalink to "`keydown`"
Listens for the keydown event from the document.
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('keydown', (event) => {
console.log(event.code);
});video:canplay Permalink to "`video:canplay`"
The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.
video:canplaythrough Permalink to "`video:canplaythrough`"
The browser estimates it can play the media through to the end without stopping for buffering.
video:complete Permalink to "`video:complete`"
The OfflineAudioContext rendering is complete.
video:durationchange Permalink to "`video:durationchange`"
Triggered when the value of the duration property changes.
video:emptied Permalink to "`video:emptied`"
The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the load() method is called to reload it.
video:ended Permalink to "`video:ended`"
Playback has stopped because the media has reached its end.
video:error Permalink to "`video:error`"
An error occurred while fetching the media data, or the resource type is not a supported media format.
video:loadeddata Permalink to "`video:loadeddata`"
The first frame of the media has finished loading.
video:loadedmetadata Permalink to "`video:loadedmetadata`"
Metadata has been loaded.
video:pause Permalink to "`video:pause`"
Playback has been paused.
video:play Permalink to "`video:play`"
Playback has begun.
video:playing Permalink to "`video:playing`"
Playback is ready to start after having been paused or delayed due to lack of data.
video:progress Permalink to "`video:progress`"
Fired periodically as the browser loads the resource.
video:ratechange Permalink to "`video:ratechange`"
The playback rate has changed.
video:seeked Permalink to "`video:seeked`"
A seek operation has completed.
video:seeking Permalink to "`video:seeking`"
A seek operation has begun.
video:stalled Permalink to "`video:stalled`"
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
video:suspend Permalink to "`video:suspend`"
Media data loading has been suspended.
video:timeupdate Permalink to "`video:timeupdate`"
The time indicated by the currentTime property has changed.
video:volumechange Permalink to "`video:volumechange`"
The volume has changed.
video:waiting Permalink to "`video:waiting`"
Playback has stopped because of a temporary lack of data.