import{_ as a,c as n,o as l,a7 as s,j as i}from"./chunks/framework.DXlgpajS.js";const Is=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},p=s('
Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.
Whether to start debug mode, which can print out all built-in events of the video by default is turned off.
Artplayer.DEBUG = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});Whether to enable the right-click context menu, enabled by default.
`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`Artplayer.CONTEXTMENU = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});The display duration of the notification message, in milliseconds, defaults to 2000
Artplayer.NOTICE_TIME = 5000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});The default width of the settings panel, in pixels, defaults to 250
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,
});Set the default width of the settings items in the panel, in pixels, the default is 200.
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,
});Set the default height of the settings items in the panel, in pixels, the default is 35.
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,
});Throttle time for the resize event, in milliseconds, defaults to 200
Artplayer.RESIZE_TIME = 500;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('resize', () => {
console.log('resize');
});Throttle time for the scroll event, in milliseconds, defaults to 200
Artplayer.SCROLL_TIME = 500;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('scroll', () => {
console.log('scroll');
});The boundary tolerance distance for the view event, in pixels, default is 50
Artplayer.SCROLL_GAP = 100;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('scroll', () => {
console.log('scroll');
});The maximum number of records for the automatic playback feature, default is 10
Artplayer.AUTO_PLAYBACK_MAX = 20;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoPlayback: true,
});The minimum duration for the auto playback feature, in seconds, with a default of 5.
Artplayer.AUTO_PLAYBACK_MIN = 10;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoPlayback: true,
});The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoPlayback: true,
});The maximum number of automatic reconnection attempts when a connection error occurs, default is 5
Artplayer.RECONNECT_TIME_MAX = 10;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/404.mp4',
});The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000
Artplayer.RECONNECT_SLEEP_TIME = 3000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/404.mp4',
});...
Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000
Artplayer.CONTROL_HIDE_TIME = 5000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});Double-click event delay time, measured in milliseconds, default is 300
Artplayer.DBCLICK_TIME = 500;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('dblclick', () => {
console.log('dblclick');
});On desktop, whether to switch to fullscreen on double click, default is true
Artplayer.DBCLICK_FULLSCREEN = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});On mobile, whether to toggle play/pause on double click, default is true
Artplayer.MOBILE_DBCLICK_PLAY = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});On mobile, whether to play/pause on single click, default is false
Artplayer.MOBILE_CLICK_PLAY = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});On mobile devices, whether a tap toggles play/pause, defaults to false
Artplayer.MOBILE_CLICK_PLAY = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200
Artplayer.AUTO_ORIENTATION_TIME = 500;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoOrientation: true,
});Info panel refresh time, unit in milliseconds, default is 1000
Artplayer.INFO_LOOP_TIME = 2000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.info.show = true;On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3
Artplayer.FAST_FORWARD_VALUE = 5;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fastForward: true,
});The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000
Artplayer.FAST_FORWARD_TIME = 2000;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fastForward: true,
});On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5
Artplayer.TOUCH_MOVE_RATIO = 1;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});The step ratio of adjusting volume with shortcuts, default is 0.1
Artplayer.VOLUME_STEP = 0.2;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5
Artplayer.SEEK_STEP = 10;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]
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;Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']
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;Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']
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;When in web fullscreen, whether to mount the player under the body element, defaults to false
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreenWeb: true,
});Setting whether to print the player version, the default is true
Artplayer.LOG_VERSION = false;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects
Artplayer.USE_RAF = true;
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
miniProgressBar: true,
});