Global Properties Permalink to "Global Properties"

The global properties here refer to the top-level properties mounted on the constructor. All property names are in uppercase. These are subject to change in the future and are rarely used.

DEBUG Permalink to "DEBUG"

Whether to enable debug mode, which can print all built-in video events. Default is off.

▶ Run Code

Artplayer.DEBUG = true;

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

STYLE Permalink to "STYLE"

Returns the player style text.

▶ Run Code

console.log(Artplayer.STYLE);

CONTEXTMENU Permalink to "CONTEXTMENU"

Whether to enable the context menu. Default is on.

▶ Run Code

Artplayer.CONTEXTMENU = false;

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

NOTICE_TIME Permalink to "NOTICE_TIME"

The display duration of notification messages, in milliseconds. Default is 2000.

▶ Run Code

Artplayer.NOTICE_TIME = 5000;

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

SETTING_WIDTH Permalink to "SETTING_WIDTH"

The default width of the settings panel, in pixels. Default is 250.

▶ Run Code

Artplayer.SETTING_WIDTH = 300;

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

SETTING_ITEM_WIDTH Permalink to "SETTING_ITEM_WIDTH"

The default width of a setting item in the settings panel, in pixels. Default is 200.

▶ Run Code

Artplayer.SETTING_ITEM_WIDTH = 300;

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

SETTING_ITEM_HEIGHT Permalink to "SETTING_ITEM_HEIGHT"

The default height of a setting item in the settings panel, in pixels. Default is 35.

▶ Run Code

Artplayer.SETTING_ITEM_HEIGHT = 40;

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

RESIZE_TIME Permalink to "RESIZE_TIME"

The throttle time for the resize event, in milliseconds. Default is 200.

▶ Run Code

Artplayer.RESIZE_TIME = 500;

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

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

SCROLL_TIME Permalink to "SCROLL_TIME"

The throttle time for the scroll event, in milliseconds. Default is 200.

▶ Run Code

Artplayer.SCROLL_TIME = 500;

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

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

SCROLL_GAP Permalink to "SCROLL_GAP"

The boundary tolerance distance for the view event, in pixels. Default is 50.

▶ Run Code

Artplayer.SCROLL_GAP = 100;

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

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

AUTO_PLAYBACK_MAX Permalink to "AUTO_PLAYBACK_MAX"

The maximum record count for the auto-playback feature. Default is 10.

▶ Run Code

Artplayer.AUTO_PLAYBACK_MAX = 20;

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

AUTO_PLAYBACK_MIN Permalink to "AUTO_PLAYBACK_MIN"

The minimum record duration for the auto-playback feature, in seconds. Default is 5.

▶ Run Code

Artplayer.AUTO_PLAYBACK_MIN = 10;

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

AUTO_PLAYBACK_TIMEOUT Permalink to "AUTO_PLAYBACK_TIMEOUT"

The hide delay duration for the auto-playback feature, in milliseconds. Default is 3000.

▶ Run Code

Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;

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

RECONNECT_TIME_MAX Permalink to "RECONNECT_TIME_MAX"

The maximum number of automatic reconnection attempts when a connection error occurs. Default is 5.

▶ Run Code

Artplayer.RECONNECT_TIME_MAX = 10;

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

RECONNECT_SLEEP_TIME Permalink to "RECONNECT_SLEEP_TIME"

The delay time for automatic reconnection when a connection error occurs, in milliseconds. Default is 1000.

▶ Run Code

Artplayer.RECONNECT_SLEEP_TIME = 3000;

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

CONTROL_HIDE_TIME Permalink to "CONTROL_HIDE_TIME"

The auto-hide delay time for the bottom control bar, in milliseconds. Default is 3000.

▶ Run Code

Artplayer.CONTROL_HIDE_TIME = 5000;

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

DBCLICK_TIME Permalink to "DBCLICK_TIME"

The delay time for the double-click event, in milliseconds. Default is 300.

▶ Run Code

Artplayer.DBCLICK_TIME = 500;

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

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

DBCLICK_FULLSCREEN Permalink to "DBCLICK_FULLSCREEN"

On desktop, whether double-click toggles fullscreen. Default is true.

▶ Run Code

Artplayer.DBCLICK_FULLSCREEN = false;

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

MOBILE_DBCLICK_PLAY Permalink to "MOBILE_DBCLICK_PLAY"

On mobile, whether double-click toggles play/pause. Default is true.

▶ Run Code

Artplayer.MOBILE_DBCLICK_PLAY = false;

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

MOBILE_CLICK_PLAY Permalink to "MOBILE_CLICK_PLAY"

On mobile, whether single-click toggles play/pause. Default is false.

▶ Run Code

Artplayer.MOBILE_CLICK_PLAY = true;

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

AUTO_ORIENTATION_TIME Permalink to "AUTO_ORIENTATION_TIME"

On mobile, the delay time for auto-rotation, in milliseconds. Default is 200.

▶ Run Code

Artplayer.AUTO_ORIENTATION_TIME = 500;

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

INFO_LOOP_TIME Permalink to "INFO_LOOP_TIME"

The refresh interval for the info panel, in milliseconds. Default is 1000.

▶ Run Code

Artplayer.INFO_LOOP_TIME = 2000;

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

art.info.show = true;

FAST_FORWARD_VALUE Permalink to "FAST_FORWARD_VALUE"

On mobile, the speed multiplier for long-press fast-forward. Default is 3.

▶ Run Code

Artplayer.FAST_FORWARD_VALUE = 5;

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

FAST_FORWARD_TIME Permalink to "FAST_FORWARD_TIME"

On mobile, the delay time for long-press fast-forward, in milliseconds. Default is 1000.

▶ Run Code

Artplayer.FAST_FORWARD_TIME = 2000;

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

TOUCH_MOVE_RATIO Permalink to "TOUCH_MOVE_RATIO"

On mobile, the speed multiplier for left/right swipe to seek. Default is 0.5.

▶ Run Code

Artplayer.TOUCH_MOVE_RATIO = 1;

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

VOLUME_STEP Permalink to "VOLUME_STEP"

The step size for volume adjustment via keyboard shortcuts. Default is 0.1.

▶ Run Code

Artplayer.VOLUME_STEP = 0.2;

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

SEEK_STEP Permalink to "SEEK_STEP"

The step size for seeking via keyboard shortcuts, in seconds. Default is 5.

▶ Run Code

Artplayer.SEEK_STEP = 10;

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

PLAYBACK_RATE Permalink to "PLAYBACK_RATE"

The built-in list of playback rates. Default is [0.5, 0.75, 1, 1.25, 1.5, 2].

▶ Run Code

Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];

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

art.contextmenu.show = true;
art.setting.show = true;

ASPECT_RATIO Permalink to "ASPECT_RATIO"

The built-in list of video aspect ratios. Default is ['default', '4:3', '16:9'].

▶ Run Code

Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];

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

art.contextmenu.show = true;
art.setting.show = true;

FLIP Permalink to "FLIP"

The built-in list of video flip options. Default is ['normal', 'horizontal', 'vertical'].

▶ Run Code

Artplayer.FLIP = ['normal', 'horizontal'];

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

art.contextmenu.show = true;
art.setting.show = true;

FULLSCREEN_WEB_IN_BODY Permalink to "FULLSCREEN_WEB_IN_BODY"

Whether to mount the player under the body element during web fullscreen mode. Default is true.

▶ Run Code

Artplayer.FULLSCREEN_WEB_IN_BODY = false;

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

LOG_VERSION Permalink to "LOG_VERSION"

Sets whether to print the player version. Default is true.

▶ Run Code

Artplayer.LOG_VERSION = false;

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

USE_RAF Permalink to "USE_RAF"

Sets whether to use requestAnimationFrame. Default is false. Currently, it is primarily used for smooth progress bar effects.

▶ Run Code

Artplayer.USE_RAF = true;

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

REMOVE_SRC_WHEN_DESTROY Permalink to "REMOVE_SRC_WHEN_DESTROY"

Whether to remove the video's src attribute and call load() to actively release media resources when destroying the player. Default is true.

Enabling this can reduce video resource usage in single-page applications or scenarios where players are frequently created/destroyed. If you wish to preserve the state of the video element and only remove the UI, you can set this to false.

▶ Run Code

Artplayer.REMOVE_SRC_WHEN_DESTROY = false;

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

// Only destroy the UI, do not actively clear the src
art.destroy();