From bd43b6638dabd2efc1b445ec5407e253178999fc Mon Sep 17 00:00:00 2001 From: Harvey Zhao Date: Sat, 7 Mar 2026 21:16:49 +0800 Subject: [PATCH] feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin with code examples for usage. - Added a new i18n setup guide, detailing language settings, default languages, and how to import and modify languages. - Included code snippets for initializing the Artplayer with different languages and examples for adding new languages. --- docs/document/404.html | 2 +- docs/document/advanced/built-in.html | 2 +- docs/document/advanced/class.html | 2 +- docs/document/advanced/event.html | 2 +- docs/document/advanced/global.html | 2 +- docs/document/advanced/plugin.html | 2 +- docs/document/advanced/property.html | 2 +- ...js => en_advanced_built-in.md.B_F31aPz.js} | 2 +- ... en_advanced_built-in.md.B_F31aPz.lean.js} | 2 +- ...xa.js => en_advanced_class.md.D17lDToP.js} | 2 +- ... => en_advanced_class.md.D17lDToP.lean.js} | 2 +- ...Yg.js => en_advanced_event.md.Cw7LYSEa.js} | 67 +++------ ... => en_advanced_event.md.Cw7LYSEa.lean.js} | 2 +- ...o.js => en_advanced_global.md.DwHxhtQU.js} | 42 ++---- ...=> en_advanced_global.md.DwHxhtQU.lean.js} | 2 +- ...J.js => en_advanced_plugin.md.Cnaq654P.js} | 2 +- ...=> en_advanced_plugin.md.Cnaq654P.lean.js} | 2 +- ...js => en_advanced_property.md.JV0Ib3j3.js} | 72 +++------- ... en_advanced_property.md.JV0Ib3j3.lean.js} | 2 +- ...> en_component_contextmenu.md.Dn3gMYMB.js} | 2 +- ...component_contextmenu.md.Dn3gMYMB.lean.js} | 2 +- ...s => en_component_controls.md.BRzTYykf.js} | 2 +- ...en_component_controls.md.BRzTYykf.lean.js} | 2 +- ....js => en_component_layers.md.B88JJHwY.js} | 2 +- ...> en_component_layers.md.B88JJHwY.lean.js} | 2 +- ...js => en_component_setting.md.C5z-_-Yy.js} | 57 +++----- ... en_component_setting.md.C5z-_-Yy.lean.js} | 2 +- ...md.Adx_P8Ii.js => en_index.md.B6J2cqvj.js} | 8 +- ...i.lean.js => en_index.md.B6J2cqvj.lean.js} | 0 ...dcbEk9.js => en_start_i18n.md.BhiDfadM.js} | 4 +- ...n.js => en_start_i18n.md.BhiDfadM.lean.js} | 2 +- ...Xvof.js => en_start_option.md.Bei8B6RP.js} | 130 +++++------------ ...js => en_start_option.md.Bei8B6RP.lean.js} | 2 +- ...ex.md.Bkwg5S8z.js => index.md.CDZ-sHkw.js} | 8 +- ...5S8z.lean.js => index.md.CDZ-sHkw.lean.js} | 0 ...WXJHB.js => plugin_danmuku.md.pX46PRX9.js} | 2 +- ....js => plugin_danmuku.md.pX46PRX9.lean.js} | 0 ....D3eO9wL_.js => start_i18n.md.BrnMiJ2K.js} | 2 +- ...lean.js => start_i18n.md.BrnMiJ2K.lean.js} | 0 docs/document/component/contextmenu.html | 2 +- docs/document/component/controls.html | 2 +- docs/document/component/layers.html | 2 +- docs/document/component/setting.html | 2 +- docs/document/en/advanced/built-in.html | 6 +- docs/document/en/advanced/class.html | 6 +- docs/document/en/advanced/event.html | 71 +++------- docs/document/en/advanced/global.html | 46 ++---- docs/document/en/advanced/plugin.html | 6 +- docs/document/en/advanced/property.html | 76 +++------- docs/document/en/component/contextmenu.html | 6 +- docs/document/en/component/controls.html | 6 +- docs/document/en/component/layers.html | 6 +- docs/document/en/component/setting.html | 61 +++----- docs/document/en/index.html | 12 +- docs/document/en/start/i18n.html | 8 +- docs/document/en/start/option.html | 132 +++++------------- docs/document/hashmap.json | 2 +- docs/document/index.html | 12 +- docs/document/plugin/danmuku.html | 6 +- docs/document/start/i18n.html | 6 +- docs/document/start/option.html | 2 +- .../artplayer-vitepress/docs/vite.config.ts | 5 +- 62 files changed, 312 insertions(+), 613 deletions(-) rename docs/document/assets/{en_advanced_built-in.md.XdT81JC0.js => en_advanced_built-in.md.B_F31aPz.js} (99%) rename docs/document/assets/{en_advanced_built-in.md.XdT81JC0.lean.js => en_advanced_built-in.md.B_F31aPz.lean.js} (95%) rename docs/document/assets/{en_advanced_class.md.BLyA7rxa.js => en_advanced_class.md.D17lDToP.js} (99%) rename docs/document/assets/{en_advanced_class.md.BLyA7rxa.lean.js => en_advanced_class.md.D17lDToP.lean.js} (94%) rename docs/document/assets/{en_advanced_event.md.CtQl1IYg.js => en_advanced_event.md.Cw7LYSEa.js} (87%) rename docs/document/assets/{en_advanced_event.md.CtQl1IYg.lean.js => en_advanced_event.md.Cw7LYSEa.lean.js} (86%) rename docs/document/assets/{en_advanced_global.md.D5Nz8wyo.js => en_advanced_global.md.DwHxhtQU.js} (92%) rename docs/document/assets/{en_advanced_global.md.D5Nz8wyo.lean.js => en_advanced_global.md.DwHxhtQU.lean.js} (87%) rename docs/document/assets/{en_advanced_plugin.md.BOuMu80J.js => en_advanced_plugin.md.Cnaq654P.js} (99%) rename docs/document/assets/{en_advanced_plugin.md.BOuMu80J.lean.js => en_advanced_plugin.md.Cnaq654P.lean.js} (94%) rename docs/document/assets/{en_advanced_property.md.urRMaqHe.js => en_advanced_property.md.JV0Ib3j3.js} (92%) rename docs/document/assets/{en_advanced_property.md.urRMaqHe.lean.js => en_advanced_property.md.JV0Ib3j3.lean.js} (66%) rename docs/document/assets/{en_component_contextmenu.md.COLfX45a.js => en_component_contextmenu.md.Dn3gMYMB.js} (99%) rename docs/document/assets/{en_component_contextmenu.md.COLfX45a.lean.js => en_component_contextmenu.md.Dn3gMYMB.lean.js} (90%) rename docs/document/assets/{en_component_controls.md.BbQsn0wJ.js => en_component_controls.md.BRzTYykf.js} (99%) rename docs/document/assets/{en_component_controls.md.BbQsn0wJ.lean.js => en_component_controls.md.BRzTYykf.lean.js} (90%) rename docs/document/assets/{en_component_layers.md.CX93a7QS.js => en_component_layers.md.B88JJHwY.js} (99%) rename docs/document/assets/{en_component_layers.md.CX93a7QS.lean.js => en_component_layers.md.B88JJHwY.lean.js} (90%) rename docs/document/assets/{en_component_setting.md.C6o2AWtX.js => en_component_setting.md.C5z-_-Yy.js} (84%) rename docs/document/assets/{en_component_setting.md.C6o2AWtX.lean.js => en_component_setting.md.C5z-_-Yy.lean.js} (65%) rename docs/document/assets/{en_index.md.Adx_P8Ii.js => en_index.md.B6J2cqvj.js} (98%) rename docs/document/assets/{en_index.md.Adx_P8Ii.lean.js => en_index.md.B6J2cqvj.lean.js} (100%) rename docs/document/assets/{en_start_i18n.md.lFdcbEk9.js => en_start_i18n.md.BhiDfadM.js} (97%) rename docs/document/assets/{en_start_i18n.md.lFdcbEk9.lean.js => en_start_i18n.md.BhiDfadM.lean.js} (70%) rename docs/document/assets/{en_start_option.md.Bk4YXvof.js => en_start_option.md.Bei8B6RP.js} (87%) rename docs/document/assets/{en_start_option.md.Bk4YXvof.lean.js => en_start_option.md.Bei8B6RP.lean.js} (60%) rename docs/document/assets/{index.md.Bkwg5S8z.js => index.md.CDZ-sHkw.js} (98%) rename docs/document/assets/{index.md.Bkwg5S8z.lean.js => index.md.CDZ-sHkw.lean.js} (100%) rename docs/document/assets/{plugin_danmuku.md.DSrWXJHB.js => plugin_danmuku.md.pX46PRX9.js} (99%) rename docs/document/assets/{plugin_danmuku.md.DSrWXJHB.lean.js => plugin_danmuku.md.pX46PRX9.lean.js} (100%) rename docs/document/assets/{start_i18n.md.D3eO9wL_.js => start_i18n.md.BrnMiJ2K.js} (98%) rename docs/document/assets/{start_i18n.md.D3eO9wL_.lean.js => start_i18n.md.BrnMiJ2K.lean.js} (100%) diff --git a/docs/document/404.html b/docs/document/404.html index 7337b1712..389541897 100644 --- a/docs/document/404.html +++ b/docs/document/404.html @@ -21,7 +21,7 @@
- + \ No newline at end of file diff --git a/docs/document/advanced/built-in.html b/docs/document/advanced/built-in.html index be5595f88..cd3591710 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -217,7 +217,7 @@ art.on('ready', () => { art.plugins.add(myPlugin); }); - + \ No newline at end of file diff --git a/docs/document/advanced/class.html b/docs/document/advanced/class.html index 97119d9a5..55cc3e51c 100644 --- a/docs/document/advanced/class.html +++ b/docs/document/advanced/class.html @@ -31,7 +31,7 @@ }); console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

▶ Run Code
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

▶ Run Code
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

▶ Run Code
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

▶ Run Code
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

▶ Run Code
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

▶ Run Code
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

▶ Run Code
js
console.info(Artplayer.option);
- + \ No newline at end of file diff --git a/docs/document/advanced/event.html b/docs/document/advanced/event.html index 0faacee1d..07cbfe96b 100644 --- a/docs/document/advanced/event.html +++ b/docs/document/advanced/event.html @@ -385,7 +385,7 @@ art.on('keydown', (event) => { console.log(event.code); });

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

- + \ No newline at end of file diff --git a/docs/document/advanced/global.html b/docs/document/advanced/global.html index b0a3198da..c87d95947 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -248,7 +248,7 @@ // 只销毁界面，不主动清空 src art.destroy(); - + \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index c7d68eba0..7e18f6ced 100644 --- a/docs/document/advanced/plugin.html +++ b/docs/document/advanced/plugin.html @@ -122,7 +122,7 @@ }) ], }); - + \ No newline at end of file diff --git a/docs/document/advanced/property.html b/docs/document/advanced/property.html index ef9558e00..cc7232d77 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -457,7 +457,7 @@ art.on('ready', () => { art.subtitleOffset = 1; }); - + \ No newline at end of file diff --git a/docs/document/assets/en_advanced_built-in.md.XdT81JC0.js b/docs/document/assets/en_advanced_built-in.md.B_F31aPz.js similarity index 99% rename from docs/document/assets/en_advanced_built-in.md.XdT81JC0.js rename to docs/document/assets/en_advanced_built-in.md.B_F31aPz.js index 1ed66397b..b52f4a836 100644 --- a/docs/document/assets/en_advanced_built-in.md.XdT81JC0.js +++ b/docs/document/assets/en_advanced_built-in.md.B_F31aPz.js @@ -1,4 +1,4 @@ -import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1764426402000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Advanced Properties ​

The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.

option ​

The player's options.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772869976000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('
Advanced Properties ​
The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.
option ​
The player's options.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
diff --git a/docs/document/assets/en_advanced_built-in.md.XdT81JC0.lean.js b/docs/document/assets/en_advanced_built-in.md.B_F31aPz.lean.js
similarity index 95%
rename from docs/document/assets/en_advanced_built-in.md.XdT81JC0.lean.js
rename to docs/document/assets/en_advanced_built-in.md.B_F31aPz.lean.js
index 15736249a..f1019c825 100644
--- a/docs/document/assets/en_advanced_built-in.md.XdT81JC0.lean.js
+++ b/docs/document/assets/en_advanced_built-in.md.B_F31aPz.lean.js
@@ -1 +1 @@
-import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1764426402000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
+import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772869976000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
diff --git a/docs/document/assets/en_advanced_class.md.BLyA7rxa.js b/docs/document/assets/en_advanced_class.md.D17lDToP.js
similarity index 99%
rename from docs/document/assets/en_advanced_class.md.BLyA7rxa.js
rename to docs/document/assets/en_advanced_class.md.D17lDToP.js
index d03e14117..9f4341356 100644
--- a/docs/document/assets/en_advanced_class.md.BLyA7rxa.js
+++ b/docs/document/assets/en_advanced_class.md.D17lDToP.js
@@ -1,4 +1,4 @@
-import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1764426402000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s('
Static Properties ​
Here, Static Properties refer to the top-level properties mounted on the constructor function, which are very rarely used.
instances ​
Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
+import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772869976000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s('
Static Properties ​
Here, Static Properties refer to the top-level properties mounted on the constructor function, which are very rarely used.
instances ​
Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/en_advanced_class.md.BLyA7rxa.lean.js b/docs/document/assets/en_advanced_class.md.D17lDToP.lean.js
similarity index 94%
rename from docs/document/assets/en_advanced_class.md.BLyA7rxa.lean.js
rename to docs/document/assets/en_advanced_class.md.D17lDToP.lean.js
index e4223cad0..38d871b6f 100644
--- a/docs/document/assets/en_advanced_class.md.BLyA7rxa.lean.js
+++ b/docs/document/assets/en_advanced_class.md.D17lDToP.lean.js
@@ -1 +1 @@
-import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1764426402000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=i(l,[["render",r]]);export{u as __pageData,_ as default};
+import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772869976000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=i(l,[["render",r]]);export{u as __pageData,_ as default};
diff --git a/docs/document/assets/en_advanced_event.md.CtQl1IYg.js b/docs/document/assets/en_advanced_event.md.Cw7LYSEa.js
similarity index 87%
rename from docs/document/assets/en_advanced_event.md.CtQl1IYg.js
rename to docs/document/assets/en_advanced_event.md.Cw7LYSEa.js
index d30a20cdd..897141eb2 100644
--- a/docs/document/assets/en_advanced_event.md.CtQl1IYg.js
+++ b/docs/document/assets/en_advanced_event.md.Cw7LYSEa.js
@@ -1,4 +1,4 @@
-import{_ as l,c as e,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1764426402000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" (prefixed with "),s("code",null,"video:"),a(") and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listen to an event:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+import{_ as e,c as l,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772869976000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),l("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" (prefixed with "),s("code",null,"video:"),a(") and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listen to an event:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -112,23 +112,14 @@ import{_ as l,c as e,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js
 
 art.on('error', (error, reconnectTime) => {
     console.info(error, reconnectTime);
+});
hover ​
Triggered when the mouse enters or leaves the player
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-## \`hover\`
-
-Triggered when the mouse enters or leaves the player
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{6}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});
mousemove ​
Triggered when the mouse moves over the player
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});
mousemove ​
Triggered when the mouse moves over the player
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -240,24 +231,15 @@ import{_ as l,c as e,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js
 
 art.on('pip', (state) => {
     console.info('pip', state);
+});
screenshot ​
Triggered when the player captures a screenshot
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
 });
 
-## \`screenshot\`
-
-Triggered when the player captures a screenshot
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{7}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});
seek ​
Triggered when the player performs a time seek
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
seek ​
Triggered when the player performs a time seek
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -363,20 +345,11 @@ import{_ as l,c as e,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js
 
 art.on('setting', (state) => {
     console.log(state);
+});
muted ​
Triggered when the mute state changes
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-## \`muted\`
-
-Triggered when the mute state changes
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{6}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('muted', (state) => {
-    console.log(state);
-});
keydown ​
Listens for keydown events from the document
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('keydown', (event) => {\n    console.log(event.code);\n});
video:canplay ​
The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering
video:canplaythrough ​
The browser estimates it can play the media through to the end without stopping to buffer content
video:complete ​
OfflineAudioContext rendering is complete
video:durationchange ​
Triggered when the value of the duration property changes
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 ​
Playback has stopped because the media has reached its end point
video:error ​
An error occurred while fetching media data, or the resource type is not a supported media format
video:loadeddata ​
The first frame of the media has finished loading
video:loadedmetadata ​
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 ​
Periodically triggered while the browser is loading the resource
video:ratechange ​
The playback rate has changed
video:seeked ​
A seek operation has completed
video:seeking ​
A seek operation has begun
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 due to temporary lack of data
',43)]))}const o=l(h,[["render",t]]);export{y as __pageData,o as default};
+art.on('muted', (state) => {
+    console.log(state);
+});
keydown ​
Listens for keydown events from the document
`,3),s("div",{className:"run-code"},"▶ Run Code",-1),i('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('keydown', (event) => {\n    console.log(event.code);\n});
video:canplay ​
The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering
video:canplaythrough ​
The browser estimates it can play the media through to the end without stopping to buffer content
video:complete ​
OfflineAudioContext rendering is complete
video:durationchange ​
Triggered when the value of the duration property changes
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 ​
Playback has stopped because the media has reached its end point
video:error ​
An error occurred while fetching media data, or the resource type is not a supported media format
video:loadeddata ​
The first frame of the media has finished loading
video:loadedmetadata ​
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 ​
Periodically triggered while the browser is loading the resource
video:ratechange ​
The playback rate has changed
video:seeked ​
A seek operation has completed
video:seeking ​
A seek operation has begun
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 due to temporary lack of data
',43)]))}const o=e(h,[["render",t]]);export{y as __pageData,o as default};
diff --git a/docs/document/assets/en_advanced_event.md.CtQl1IYg.lean.js b/docs/document/assets/en_advanced_event.md.Cw7LYSEa.lean.js
similarity index 86%
rename from docs/document/assets/en_advanced_event.md.CtQl1IYg.lean.js
rename to docs/document/assets/en_advanced_event.md.Cw7LYSEa.lean.js
index 1851be6db..26c73e8f4 100644
--- a/docs/document/assets/en_advanced_event.md.CtQl1IYg.lean.js
+++ b/docs/document/assets/en_advanced_event.md.Cw7LYSEa.lean.js
@@ -1 +1 @@
-import{_ as l,c as e,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1764426402000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" (prefixed with "),s("code",null,"video:"),a(") and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listen to an event:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=l(h,[["render",t]]);export{y as __pageData,o as default};
+import{_ as e,c as l,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772869976000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),l("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" (prefixed with "),s("code",null,"video:"),a(") and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listen to an event:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=e(h,[["render",t]]);export{y as __pageData,o as default};
diff --git a/docs/document/assets/en_advanced_global.md.D5Nz8wyo.js b/docs/document/assets/en_advanced_global.md.DwHxhtQU.js
similarity index 92%
rename from docs/document/assets/en_advanced_global.md.D5Nz8wyo.js
rename to docs/document/assets/en_advanced_global.md.DwHxhtQU.js
index f171482c8..bf531bb60 100644
--- a/docs/document/assets/en_advanced_global.md.D5Nz8wyo.js
+++ b/docs/document/assets/en_advanced_global.md.DwHxhtQU.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1764426402000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Global Properties ​
These global properties refer to the top-level properties mounted on the constructor. The property names are all in uppercase. They are subject to change in the future and are generally not used.
DEBUG ​
Whether to enable debug mode, which can print all built-in events of the video. Default is off.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772869976000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Global Properties ​
These global properties refer to the top-level properties mounted on the constructor. The property names are all in uppercase. They are subject to change in the future and are generally not used.
DEBUG ​
Whether to enable debug mode, which can print all built-in events of the video. Default is off.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -98,21 +98,12 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/404.mp4',
-});
+});
CONTROL_HIDE_TIME ​
The delay time in milliseconds for auto-hiding the bottom control bar. Default is 3000.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-## CONTROL_HIDE_TIME
-
-The delay time in milliseconds for auto-hiding the bottom control bar. Default is \`3000\`.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js
-Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
DBCLICK_TIME ​
The delay time in milliseconds for double-click events. Default is 300.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
DBCLICK_TIME ​
The delay time in milliseconds for double-click events. Default is 300.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DBCLICK_TIME = 500;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -206,22 +197,13 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
 });
 
 art.contextmenu.show = true;
-art.setting.show = true;
+art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
Determines whether to mount the player under the body element during web fullscreen mode. Defaults to true.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = false;
 
-## FULLSCREEN_WEB_IN_BODY
-
-Determines whether to mount the player under the \`body\` element during web fullscreen mode. Defaults to \`true\`.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js
-Artplayer.FULLSCREEN_WEB_IN_BODY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
LOG_VERSION ​
Sets whether to print the player version. Defaults to true.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.LOG_VERSION = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
LOG_VERSION ​
Sets whether to print the player version. Defaults to true.
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.LOG_VERSION = false;
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/en_advanced_global.md.D5Nz8wyo.lean.js b/docs/document/assets/en_advanced_global.md.DwHxhtQU.lean.js
similarity index 87%
rename from docs/document/assets/en_advanced_global.md.D5Nz8wyo.lean.js
rename to docs/document/assets/en_advanced_global.md.DwHxhtQU.lean.js
index b6dcb3c79..69420ccaa 100644
--- a/docs/document/assets/en_advanced_global.md.D5Nz8wyo.lean.js
+++ b/docs/document/assets/en_advanced_global.md.DwHxhtQU.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1764426402000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772869976000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_advanced_plugin.md.BOuMu80J.js b/docs/document/assets/en_advanced_plugin.md.Cnaq654P.js
similarity index 99%
rename from docs/document/assets/en_advanced_plugin.md.BOuMu80J.js
rename to docs/document/assets/en_advanced_plugin.md.Cnaq654P.js
index 2b848a7bf..3f6d0fdb5 100644
--- a/docs/document/assets/en_advanced_plugin.md.BOuMu80J.js
+++ b/docs/document/assets/en_advanced_plugin.md.Cnaq654P.js
@@ -1,4 +1,4 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1764426402000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins becomes very straightforward.")],-1),s("p",null,"You can load plugin functions during instantiation:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
+import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772869976000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins becomes very straightforward.")],-1),s("p",null,"You can load plugin functions during instantiation:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
     console.info(art);
     return {
         name: 'myPlugin',
diff --git a/docs/document/assets/en_advanced_plugin.md.BOuMu80J.lean.js b/docs/document/assets/en_advanced_plugin.md.Cnaq654P.lean.js
similarity index 94%
rename from docs/document/assets/en_advanced_plugin.md.BOuMu80J.lean.js
rename to docs/document/assets/en_advanced_plugin.md.Cnaq654P.lean.js
index 16e78d644..750327d6b 100644
--- a/docs/document/assets/en_advanced_plugin.md.BOuMu80J.lean.js
+++ b/docs/document/assets/en_advanced_plugin.md.Cnaq654P.lean.js
@@ -1 +1 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1764426402000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins becomes very straightforward.")],-1),s("p",null,"You can load plugin functions during instantiation:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(e,[["render",k]]);export{y as __pageData,b as default};
+import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772869976000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins becomes very straightforward.")],-1),s("p",null,"You can load plugin functions during instantiation:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(e,[["render",k]]);export{y as __pageData,b as default};
diff --git a/docs/document/assets/en_advanced_property.md.urRMaqHe.js b/docs/document/assets/en_advanced_property.md.JV0Ib3j3.js
similarity index 92%
rename from docs/document/assets/en_advanced_property.md.urRMaqHe.js
rename to docs/document/assets/en_advanced_property.md.JV0Ib3j3.js
index 8e57eb705..640c95708 100644
--- a/docs/document/assets/en_advanced_property.md.urRMaqHe.js
+++ b/docs/document/assets/en_advanced_property.md.JV0Ib3j3.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1764426402000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Instance Properties ​
Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.
play ​
  • Type: Function
Play the video.
',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772869976000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Instance Properties ​
Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.
play ​
  • Type: Function
Play the video.
',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     muted: true,
@@ -106,35 +106,17 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
     setTimeout(() => {
         art.switchUrl('/assets/sample/video.mp4?t=0');
     }, 3000);
+});
Note
art.switch and art.switchUrl have the same functionality, but the art.switchUrl method returns a Promise. It resolves when the new URL is playable and rejects when the new URL fails to load.
switchQuality ​
  • Type: Function
  • Parameter: String
Sets the video quality URL. Similar to art.switchUrl, but retains the previous playback progress.
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-:::warning Note
-
-\`art.switch\` and \`art.switchUrl\` have the same functionality, but the \`art.switchUrl\` method returns a \`Promise\`. It \`resolve\`s when the new URL is playable and \`reject\`s when the new URL fails to load.
-
-:::
-
-## \`switchQuality\`
-
--   Type: \`Function\`
--   Parameter: \`String\`
-
-Sets the video quality URL. Similar to \`art.switchUrl\`, but retains the previous playback progress.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{9}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Sets and gets whether the video is muted.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Sets and gets whether the video is muted.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -421,30 +403,18 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
 			},
 		];
 	}, 3000);
-})
+})
thumbnails ​
  • Type: Setter/Getter
  • Parameter: Object
Dynamically set thumbnails
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-## \`thumbnails\`
-
--   Type: \`Setter/Getter\`
--   Parameter: \`Object\`
-
-Dynamically set thumbnails
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js
-var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.thumbnails = {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    };
-});
subtitleOffset ​
  • Type: Setter/Getter
  • Parameter: Number
Dynamically set subtitle offset
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+art.on('ready', () => {
+    art.thumbnails = {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    };
+});
subtitleOffset ​
  • Type: Setter/Getter
  • Parameter: Number
Dynamically set subtitle offset
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
 	container: '.artplayer-app',
 	url: '/assets/sample/video.mp4',
     subtitle: {
diff --git a/docs/document/assets/en_advanced_property.md.urRMaqHe.lean.js b/docs/document/assets/en_advanced_property.md.JV0Ib3j3.lean.js
similarity index 66%
rename from docs/document/assets/en_advanced_property.md.urRMaqHe.lean.js
rename to docs/document/assets/en_advanced_property.md.JV0Ib3j3.lean.js
index e6ac58a78..6c8401ed4 100644
--- a/docs/document/assets/en_advanced_property.md.urRMaqHe.lean.js
+++ b/docs/document/assets/en_advanced_property.md.JV0Ib3j3.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1764426402000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772869976000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_component_contextmenu.md.COLfX45a.js b/docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.js
similarity index 99%
rename from docs/document/assets/en_component_contextmenu.md.COLfX45a.js
rename to docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.js
index 75f41b480..4c33a5932 100644
--- a/docs/document/assets/en_component_contextmenu.md.COLfX45a.js
+++ b/docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1759888544000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Context Menu ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772869976000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('
Context Menu ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     contextmenu: [
diff --git a/docs/document/assets/en_component_contextmenu.md.COLfX45a.lean.js b/docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.lean.js
similarity index 90%
rename from docs/document/assets/en_component_contextmenu.md.COLfX45a.lean.js
rename to docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.lean.js
index 5db4b2f9c..6852d8e7a 100644
--- a/docs/document/assets/en_component_contextmenu.md.COLfX45a.lean.js
+++ b/docs/document/assets/en_component_contextmenu.md.Dn3gMYMB.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1759888544000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o as default};
+import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772869976000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o as default};
diff --git a/docs/document/assets/en_component_controls.md.BbQsn0wJ.js b/docs/document/assets/en_component_controls.md.BRzTYykf.js
similarity index 99%
rename from docs/document/assets/en_component_controls.md.BbQsn0wJ.js
rename to docs/document/assets/en_component_controls.md.BRzTYykf.js
index 12fdd3ecd..53d4a6da5 100644
--- a/docs/document/assets/en_component_controls.md.BbQsn0wJ.js
+++ b/docs/document/assets/en_component_controls.md.BRzTYykf.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1764426402000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Controls ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique control name for CSS class identification
indexNumberControl index for display priority
htmlString, ElementControl's DOM element
styleObjectControl style object
clickFunctionControl click event handler
mountedFunctionTriggered after control is mounted
tooltipStringControl tooltip text
positionStringleft or right - controls display position
selectorArrayArray of selector list objects
onSelectFunctionFunction triggered when selector item is clicked
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772869976000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Controls ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique control name for CSS class identification
indexNumberControl index for display priority
htmlString, ElementControl's DOM element
styleObjectControl style object
clickFunctionControl click event handler
mountedFunctionTriggered after control is mounted
tooltipStringControl tooltip text
positionStringleft or right - controls display position
selectorArrayArray of selector list objects
onSelectFunctionFunction triggered when selector item is clicked
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     controls: [
diff --git a/docs/document/assets/en_component_controls.md.BbQsn0wJ.lean.js b/docs/document/assets/en_component_controls.md.BRzTYykf.lean.js
similarity index 90%
rename from docs/document/assets/en_component_controls.md.BbQsn0wJ.lean.js
rename to docs/document/assets/en_component_controls.md.BRzTYykf.lean.js
index 46ad2eeb1..06d2a7b66 100644
--- a/docs/document/assets/en_component_controls.md.BbQsn0wJ.lean.js
+++ b/docs/document/assets/en_component_controls.md.BRzTYykf.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1764426402000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772869976000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_component_layers.md.CX93a7QS.js b/docs/document/assets/en_component_layers.md.B88JJHwY.js
similarity index 99%
rename from docs/document/assets/en_component_layers.md.CX93a7QS.js
rename to docs/document/assets/en_component_layers.md.B88JJHwY.js
index ebebccdae..f87481714 100644
--- a/docs/document/assets/en_component_layers.md.CX93a7QS.js
+++ b/docs/document/assets/en_component_layers.md.B88JJHwY.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1764426402000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Layer ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772869976000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Layer ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text
Creation ​
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
diff --git a/docs/document/assets/en_component_layers.md.CX93a7QS.lean.js b/docs/document/assets/en_component_layers.md.B88JJHwY.lean.js
similarity index 90%
rename from docs/document/assets/en_component_layers.md.CX93a7QS.lean.js
rename to docs/document/assets/en_component_layers.md.B88JJHwY.lean.js
index 5a5e6e3d1..9ff5e6c45 100644
--- a/docs/document/assets/en_component_layers.md.CX93a7QS.lean.js
+++ b/docs/document/assets/en_component_layers.md.B88JJHwY.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1764426402000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772869976000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/en_component_setting.md.C6o2AWtX.js b/docs/document/assets/en_component_setting.md.C5z-_-Yy.js
similarity index 84%
rename from docs/document/assets/en_component_setting.md.C6o2AWtX.js
rename to docs/document/assets/en_component_setting.md.C5z-_-Yy.js
index 028adf62c..dba59cf3a 100644
--- a/docs/document/assets/en_component_setting.md.C6o2AWtX.js
+++ b/docs/document/assets/en_component_setting.md.C5z-_-Yy.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1764426402000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Settings Panel ​
Built-in ​
First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset
',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772869976000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('
Settings Panel ​
Built-in ​
First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset
',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 	setting: true,
@@ -116,41 +116,26 @@ import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
             ],
         },
     ],
-});
-
-## Create - Toggle Button
-
-| Property   | Type                | Description               |
-| ---------- | ------------------- | ------------------------- |
-| \`html\`     | \`String\`, \`Element\` | DOM element of the item   |
-| \`icon\`     | \`String\`, \`Element\` | Icon of the item          |
-| \`switch\`   | \`Boolean\`           | Default state of the button |
-| \`onSwitch\` | \`Function\`          | Button toggle event       |
-| \`tooltip\`  | \`String\`            | Tooltip text              |
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});
Create - Range Slider ​
PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
rangeArrayDefault state array
onRangeFunctionEvent triggered on completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+});
Create - Toggle Button ​
PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
switchBooleanDefault state of the button
onSwitchFunctionButton toggle event
tooltipStringTooltip text
`,3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
Create - Range Slider ​
PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
rangeArrayDefault state array
onRangeFunctionEvent triggered on completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
 const value = range[0];
 const min = range[1];
 const max = range[2];
diff --git a/docs/document/assets/en_component_setting.md.C6o2AWtX.lean.js b/docs/document/assets/en_component_setting.md.C5z-_-Yy.lean.js
similarity index 65%
rename from docs/document/assets/en_component_setting.md.C6o2AWtX.lean.js
rename to docs/document/assets/en_component_setting.md.C5z-_-Yy.lean.js
index 525ef77bc..c163454cd 100644
--- a/docs/document/assets/en_component_setting.md.C6o2AWtX.lean.js
+++ b/docs/document/assets/en_component_setting.md.C5z-_-Yy.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1764426402000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",e]]);export{c as __pageData,y as default};
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772869976000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",e]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/en_index.md.Adx_P8Ii.js b/docs/document/assets/en_index.md.B6J2cqvj.js
similarity index 98%
rename from docs/document/assets/en_index.md.Adx_P8Ii.js
rename to docs/document/assets/en_index.md.B6J2cqvj.js
index 2d883a1e8..893f3fa7f 100644
--- a/docs/document/assets/en_index.md.Adx_P8Ii.js
+++ b/docs/document/assets/en_index.md.B6J2cqvj.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation & Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1767420511000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`
Installation & Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
html
<html>
+import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation & Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1767420511000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`
Installation & Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>
Note
The player's dimensions depend on the size of its container container, so your container must have defined dimensions.
See more usage examples at the following link:
/example
Vue.js ​
vue
<template>
+</html>
Note
The player's dimensions depend on the size of its container container, so your container must have defined dimensions.
See more usage examples at the following link:
/example
Vue.js ​
vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>
Artplayer is not reactive:
Directly modifying option in Vue.js will not update the player.
React.js ​
jsx
import Artplayer from 'artplayer'
+</script>
Artplayer is not reactive:
Directly modifying option in Vue.js will not update the player.
React.js ​
jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);
Legacy Browsers ​
The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version
For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you need to support even older browsers, modify the following configuration and build it yourself:
Build configuration: scripts/build.js
Reference documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
Legacy Browsers ​
The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version
For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you need to support even older browsers, modify the following configuration and build it yourself:
Build configuration: scripts/build.js
Reference documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/en_index.md.Adx_P8Ii.lean.js b/docs/document/assets/en_index.md.B6J2cqvj.lean.js
similarity index 100%
rename from docs/document/assets/en_index.md.Adx_P8Ii.lean.js
rename to docs/document/assets/en_index.md.B6J2cqvj.lean.js
diff --git a/docs/document/assets/en_start_i18n.md.lFdcbEk9.js b/docs/document/assets/en_start_i18n.md.BhiDfadM.js
similarity index 97%
rename from docs/document/assets/en_start_i18n.md.lFdcbEk9.js
rename to docs/document/assets/en_start_i18n.md.BhiDfadM.js
index db2b320a6..e1a6dc745 100644
--- a/docs/document/assets/en_start_i18n.md.lFdcbEk9.js
+++ b/docs/document/assets/en_start_i18n.md.BhiDfadM.js
@@ -1,8 +1,8 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1764426402000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l(`
Language Settings ​
DANGER
Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will only include Simplified Chinese and English. Other languages are no longer bundled by default and must be imported manually as needed.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n implementation reference, see: artplayer/types/i18n.d.ts
Default Languages ​
The default languages are: en, zh-cn. No manual import is required.
js
var art = new Artplayer({
+import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772869976000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l(`
Language Settings ​
DANGER
Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will only include Simplified Chinese and English. Other languages are no longer bundled by default and must be imported manually as needed.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n implementation reference, see: artplayer/types/i18n.d.ts
Default Languages ​
The default languages are: en, zh-cn. No manual import is required.
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});
Importing Languages ​
Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.
Language files after bundling are located at: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
+});
Importing Languages ​
Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.
Language files after bundling are located at: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/en_start_i18n.md.lFdcbEk9.lean.js b/docs/document/assets/en_start_i18n.md.BhiDfadM.lean.js
similarity index 70%
rename from docs/document/assets/en_start_i18n.md.lFdcbEk9.lean.js
rename to docs/document/assets/en_start_i18n.md.BhiDfadM.lean.js
index b9234b59f..7f3455868 100644
--- a/docs/document/assets/en_start_i18n.md.lFdcbEk9.lean.js
+++ b/docs/document/assets/en_start_i18n.md.BhiDfadM.lean.js
@@ -1 +1 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1764426402000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l("",14)]))}const c=a(e,[["render",p]]);export{g as __pageData,c as default};
+import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772869976000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l("",14)]))}const c=a(e,[["render",p]]);export{g as __pageData,c as default};
diff --git a/docs/document/assets/en_start_option.md.Bk4YXvof.js b/docs/document/assets/en_start_option.md.Bei8B6RP.js
similarity index 87%
rename from docs/document/assets/en_start_option.md.Bk4YXvof.js
rename to docs/document/assets/en_start_option.md.Bei8B6RP.js
index a66793215..2dcd3e2c5 100644
--- a/docs/document/assets/en_start_option.md.Bk4YXvof.js
+++ b/docs/document/assets/en_start_option.md.Bei8B6RP.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1764426402000}'),p={name:"en/start/option.md"};function h(t,a,k,r,d,E){return e(),l("div",null,a[0]||(a[0]=[s('
Basic Options ​
container ​
  • Type: String, Element
  • Default: #artplayer
The DOM container where the player is mounted.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772869976000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return l(),e("div",null,a[0]||(a[0]=[s('
Basic Options ​
container ​
  • Type: String, Element
  • Default: #artplayer
The DOM container where the player is mounted.
',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app', 
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
@@ -66,23 +66,11 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     autoSize: true,
-});
-
-## \`autoMini\`
-
--   Type: \`Boolean\`
--   Default: \`false\`
-
-Automatically enters \`mini player\` mode when the player scrolls out of the browser viewport.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{4}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});
loop ​
  • Type: Boolean
  • Default: false
Whether to enable video looping.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+});
autoMini ​
  • Type: Boolean
  • Default: false
Automatically enters mini player mode when the player scrolls out of the browser viewport.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});
loop ​
  • Type: Boolean
  • Default: false
Whether to enable video looping.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     loop: true,
@@ -141,23 +129,11 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
         url: '/assets/sample/subtitle.srt',
     },
     setting: true,
-});
-
-## \`miniProgressBar\`
-
--   Type: \`Boolean\`
--   Default: \`false\`
-
-Mini progress bar that appears only when the player loses focus and is playing.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{4}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use SSR mount mode. Useful if you want to pre-render the player's required HTML before mounting.
You can access the player's required HTML via Artplayer.html.
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var $container = document.querySelector('.artplayer-app');
+});
miniProgressBar ​
  • Type: Boolean
  • Default: false
Mini progress bar that appears only when the player loses focus and is playing.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use SSR mount mode. Useful if you want to pre-render the player's required HTML before mounting.
You can access the player's required HTML via Artplayer.html.
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var $container = document.querySelector('.artplayer-app');
 $container.innerHTML = Artplayer.html;
 
 var art = new Artplayer({
@@ -253,45 +229,21 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
             },
         },
     ],
-});
-
-:::warning For \`Component Configuration\`, please refer to:
-
-[/component/controls.html](/component/controls.html)
-
-:::
-
-## \`quality\`
-
--   Type: \`Array\`
--   Default: \`[]\`
-
-Whether to display the \`Quality Selection\` list in the bottom control bar.
-
-| Property  | Type      | Description      |
-| --------- | --------- | ---------------- |
-| \`default\` | \`Boolean\` | Default quality  |
-| \`html\`    | \`String\`  | Quality name     |
-| \`url\`     | \`String\`  | Quality URL      |
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{4-14}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});
highlight ​
  • Type: Array
  • Default: []
Display Highlight Information on the progress bar.
PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+});
For Component Configuration, please refer to:
/component/controls.html
quality ​
  • Type: Array
  • Default: []
Whether to display the Quality Selection list in the bottom control bar.
PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
`,6),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});
highlight ​
  • Type: Array
  • Default: []
Display Highlight Information on the progress bar.
PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     highlight: [
@@ -359,26 +311,14 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
         'webkit-playsinline': true,
         playsInline: true,
     },
-});
-
-## \`icons\`
-
--   Type: \`Object\`
--   Default: \`{}\`
-
-Used to replace default icons, supports both \`Html\` strings and \`HTMLElement\`.
-
-<div className="run-code">▶ Run Code</div>
-
-\`\`\`js{4-7}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});
All Icon Definitions
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
Used to specify the video format. It needs to be used in conjunction with customType. By default, the video format is determined by the suffix of the video URL (e.g., .m3u8, .mkv, .ts). However, sometimes the video URL lacks the correct suffix, so explicit specification is necessary.
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+});
icons ​
  • Type: Object
  • Default: {}
Used to replace default icons, supports both Html strings and HTMLElement.
`,4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});
All Icon Definitions
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
Used to specify the video format. It needs to be used in conjunction with customType. By default, the video format is determined by the suffix of the video URL (e.g., .m3u8, .mkv, .ts). However, sometimes the video URL lacks the correct suffix, so explicit specification is necessary.
`,5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.m3u8',
     type: 'm3u8',
@@ -449,4 +389,4 @@ import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
-});
`,1)]))}const g=n(p,[["render",h]]);export{o as __pageData,g as default};
+});
`,1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
diff --git a/docs/document/assets/en_start_option.md.Bk4YXvof.lean.js b/docs/document/assets/en_start_option.md.Bei8B6RP.lean.js
similarity index 60%
rename from docs/document/assets/en_start_option.md.Bk4YXvof.lean.js
rename to docs/document/assets/en_start_option.md.Bei8B6RP.lean.js
index 2cd059ad6..40bbf6b7c 100644
--- a/docs/document/assets/en_start_option.md.Bk4YXvof.lean.js
+++ b/docs/document/assets/en_start_option.md.Bei8B6RP.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1764426402000}'),p={name:"en/start/option.md"};function h(t,a,k,r,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",h]]);export{o as __pageData,g as default};
+import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772869976000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
diff --git a/docs/document/assets/index.md.Bkwg5S8z.js b/docs/document/assets/index.md.CDZ-sHkw.js
similarity index 98%
rename from docs/document/assets/index.md.Bkwg5S8z.js
rename to docs/document/assets/index.md.CDZ-sHkw.js
index 4ca3fe98e..34bac633f 100644
--- a/docs/document/assets/index.md.Bkwg5S8z.js
+++ b/docs/document/assets/index.md.CDZ-sHkw.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1767420511000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
html
<html>
+import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1767420511000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/example
Vue.js ​
vue
<template>
+</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/example
Vue.js ​
vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import Artplayer from 'artplayer'
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.6 开始，artplayer 和所有插件还会提供一个 ESM 版本的 mjs，如：
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.6 开始，artplayer 和所有插件还会提供一个 ESM 版本的 mjs，如：
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/index.md.Bkwg5S8z.lean.js b/docs/document/assets/index.md.CDZ-sHkw.lean.js
similarity index 100%
rename from docs/document/assets/index.md.Bkwg5S8z.lean.js
rename to docs/document/assets/index.md.CDZ-sHkw.lean.js
diff --git a/docs/document/assets/plugin_danmuku.md.DSrWXJHB.js b/docs/document/assets/plugin_danmuku.md.pX46PRX9.js
similarity index 99%
rename from docs/document/assets/plugin_danmuku.md.DSrWXJHB.js
rename to docs/document/assets/plugin_danmuku.md.pX46PRX9.js
index 2f27e7b63..a7ce703ef 100644
--- a/docs/document/assets/plugin_danmuku.md.DSrWXJHB.js
+++ b/docs/document/assets/plugin_danmuku.md.pX46PRX9.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s(`
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要text就可以发送一个弹幕，其余都是非必要参数
js
{
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s(`
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要text就可以发送一个弹幕，其余都是非必要参数
js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认)，1: 顶部，2: 底部
diff --git a/docs/document/assets/plugin_danmuku.md.DSrWXJHB.lean.js b/docs/document/assets/plugin_danmuku.md.pX46PRX9.lean.js
similarity index 100%
rename from docs/document/assets/plugin_danmuku.md.DSrWXJHB.lean.js
rename to docs/document/assets/plugin_danmuku.md.pX46PRX9.lean.js
diff --git a/docs/document/assets/start_i18n.md.D3eO9wL_.js b/docs/document/assets/start_i18n.md.BrnMiJ2K.js
similarity index 98%
rename from docs/document/assets/start_i18n.md.D3eO9wL_.js
rename to docs/document/assets/start_i18n.md.BrnMiJ2K.js
index 456a32c42..a4f8a8da6 100644
--- a/docs/document/assets/start_i18n.md.D3eO9wL_.js
+++ b/docs/document/assets/start_i18n.md.BrnMiJ2K.js
@@ -2,7 +2,7 @@ import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/start_i18n.md.D3eO9wL_.lean.js b/docs/document/assets/start_i18n.md.BrnMiJ2K.lean.js
similarity index 100%
rename from docs/document/assets/start_i18n.md.D3eO9wL_.lean.js
rename to docs/document/assets/start_i18n.md.BrnMiJ2K.lean.js
diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html
index f401bc896..aede92062 100644
--- a/docs/document/component/contextmenu.html
+++ b/docs/document/component/contextmenu.html
@@ -106,7 +106,7 @@
         })
     }, 3000);
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/component/controls.html b/docs/document/component/controls.html
index e4efdc278..20ba5cbbb 100644
--- a/docs/document/component/controls.html
+++ b/docs/document/component/controls.html
@@ -153,7 +153,7 @@
         });
     }, 3000);
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/component/layers.html b/docs/document/component/layers.html
index 73a6db878..38bbc3d0f 100644
--- a/docs/document/component/layers.html
+++ b/docs/document/component/layers.html
@@ -125,7 +125,7 @@
         });
     }, 3000);
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/component/setting.html b/docs/document/component/setting.html
index 979efa294..6c094be50 100644
--- a/docs/document/component/setting.html
+++ b/docs/document/component/setting.html
@@ -245,7 +245,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/en/advanced/built-in.html b/docs/document/en/advanced/built-in.html index 91c828bec..a884d5429 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -13,7 +13,7 @@ - + @@ -216,8 +216,8 @@ art.on('ready', () => { art.plugins.add(myPlugin); -}); - +}); + \ No newline at end of file diff --git a/docs/document/en/advanced/class.html b/docs/document/en/advanced/class.html index 48429ad87..a27c615a4 100644 --- a/docs/document/en/advanced/class.html +++ b/docs/document/en/advanced/class.html @@ -13,7 +13,7 @@ - + @@ -30,8 +30,8 @@ url: '/assets/sample/video.mp4', }); -console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

▶ Run Code
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

▶ Run Code
js
console.info(Artplayer.env);

build ​

Returns the build time of the player.

▶ Run Code
js
console.info(Artplayer.build);

config ​

Returns the default configuration for videos.

▶ Run Code
js
console.info(Artplayer.config);

utils ​

Returns the collection of utility functions for the player.

▶ Run Code
js
console.info(Artplayer.utils);

For all utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation schema for player options.

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor function for the event emitter.

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options.

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

Returns the utility function for type detection.

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required by the player.

▶ Run Code
js
console.info(Artplayer.html);

option ​

Returns the default options for the player.

▶ Run Code
js
console.info(Artplayer.option);
- +console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

▶ Run Code
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

▶ Run Code
js
console.info(Artplayer.env);

build ​

Returns the build time of the player.

▶ Run Code
js
console.info(Artplayer.build);

config ​

Returns the default configuration for videos.

▶ Run Code
js
console.info(Artplayer.config);

utils ​

Returns the collection of utility functions for the player.

▶ Run Code
js
console.info(Artplayer.utils);

For all utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation schema for player options.

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor function for the event emitter.

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options.

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

Returns the utility function for type detection.

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required by the player.

▶ Run Code
js
console.info(Artplayer.html);

option ​

Returns the default options for the player.

▶ Run Code
js
console.info(Artplayer.option);
+ \ No newline at end of file diff --git a/docs/document/en/advanced/event.html b/docs/document/en/advanced/event.html index 09c802d20..fb49eded9 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -13,7 +13,7 @@ - + @@ -137,23 +137,14 @@ art.on('error', (error, reconnectTime) => { console.info(error, reconnectTime); +});

hover ​

Triggered when the mouse enters or leaves the player

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-## `hover`
-
-Triggered when the mouse enters or leaves the player
-
-<div className="run-code">▶ Run Code</div>
-
-```js{6}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});

mousemove ​

Triggered when the mouse moves over the player

▶ Run Code
js
var art = new Artplayer({
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});

mousemove ​

Triggered when the mouse moves over the player

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -265,24 +256,15 @@
 
 art.on('pip', (state) => {
     console.info('pip', state);
+});

screenshot ​

Triggered when the player captures a screenshot

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
 });
 
-## `screenshot`
-
-Triggered when the player captures a screenshot
-
-<div className="run-code">▶ Run Code</div>
-
-```js{7}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});

seek ​

Triggered when the player performs a time seek

▶ Run Code
js
var art = new Artplayer({
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});

seek ​

Triggered when the player performs a time seek

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -388,31 +370,22 @@
 
 art.on('setting', (state) => {
     console.log(state);
+});

muted ​

Triggered when the mute state changes

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-## `muted`
-
-Triggered when the mute state changes
-
-<div className="run-code">▶ Run Code</div>
-
-```js{6}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('muted', (state) => {
-    console.log(state);
-});

keydown ​

Listens for keydown events from the document

▶ Run Code
js
var art = new Artplayer({
+art.on('muted', (state) => {
+    console.log(state);
+});

keydown ​

Listens for keydown events from the document

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
 
 art.on('keydown', (event) => {
     console.log(event.code);
-});

video:canplay ​

The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping to buffer content

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

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 ​

Playback has stopped because the media has reached its end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

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 ​

Periodically triggered while the browser is loading the resource

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek operation has completed

video:seeking ​

A seek operation has begun

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 due to temporary lack of data

- +});

video:canplay ​

The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping to buffer content

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

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 ​

Playback has stopped because the media has reached its end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

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 ​

Periodically triggered while the browser is loading the resource

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek operation has completed

video:seeking ​

A seek operation has begun

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 due to temporary lack of data

+ \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index 90518c431..7c6403b1b 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -13,7 +13,7 @@ - + @@ -123,21 +123,12 @@ var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/404.mp4', -}); +});

CONTROL_HIDE_TIME ​

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

▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-## CONTROL_HIDE_TIME
-
-The delay time in milliseconds for auto-hiding the bottom control bar. Default is `3000`.
-
-<div className="run-code">▶ Run Code</div>
-
-```js
-Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

DBCLICK_TIME ​

The delay time in milliseconds for double-click events. Default is 300.

▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

DBCLICK_TIME ​

The delay time in milliseconds for double-click events. Default is 300.

▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -231,22 +222,13 @@
 });
 
 art.contextmenu.show = true;
-art.setting.show = true;
+art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

Determines whether to mount the player under the body element during web fullscreen mode. Defaults to true.

▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = false;
 
-## FULLSCREEN_WEB_IN_BODY
-
-Determines whether to mount the player under the `body` element during web fullscreen mode. Defaults to `true`.
-
-<div className="run-code">▶ Run Code</div>
-
-```js
-Artplayer.FULLSCREEN_WEB_IN_BODY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

LOG_VERSION ​

Sets whether to print the player version. Defaults to true.

▶ Run Code
js
Artplayer.LOG_VERSION = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

LOG_VERSION ​

Sets whether to print the player version. Defaults to true.

▶ Run Code
js
Artplayer.LOG_VERSION = false;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -265,8 +247,8 @@
 });
 
 // Only destroys the UI, does not actively clear src
-art.destroy();
- +art.destroy(); + \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index 4fced4e90..77ad58e41 100644 --- a/docs/document/en/advanced/plugin.html +++ b/docs/document/en/advanced/plugin.html @@ -13,7 +13,7 @@ - + @@ -121,8 +121,8 @@ url: '/assets/sample/layer.png' }) ], -}); - +}); + \ No newline at end of file diff --git a/docs/document/en/advanced/property.html b/docs/document/en/advanced/property.html index 00239fbc9..8b98926c1 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -13,7 +13,7 @@ - + @@ -131,35 +131,17 @@ setTimeout(() => { art.switchUrl('/assets/sample/video.mp4?t=0'); }, 3000); +});

Note

art.switch and art.switchUrl have the same functionality, but the art.switchUrl method returns a Promise. It resolves when the new URL is playable and rejects when the new URL fails to load.

switchQuality ​

Sets the video quality URL. Similar to art.switchUrl, but retains the previous playback progress.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
 });
 
-:::warning Note
-
-`art.switch` and `art.switchUrl` have the same functionality, but the `art.switchUrl` method returns a `Promise`. It `resolve`s when the new URL is playable and `reject`s when the new URL fails to load.
-
-:::
-
-## `switchQuality`
-
--   Type: `Function`
--   Parameter: `String`
-
-Sets the video quality URL. Similar to `art.switchUrl`, but retains the previous playback progress.
-
-<div className="run-code">▶ Run Code</div>
-
-```js{9}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

muted ​

Sets and gets whether the video is muted.

▶ Run Code
js
var art = new Artplayer({
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

muted ​

Sets and gets whether the video is muted.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -453,30 +435,18 @@
 			},
 		];
 	}, 3000);
-})
+})

thumbnails ​

Dynamically set thumbnails

▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-## `thumbnails`
-
--   Type: `Setter/Getter`
--   Parameter: `Object`
-
-Dynamically set thumbnails
-
-<div className="run-code">▶ Run Code</div>
-
-```js
-var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.thumbnails = {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    };
-});

subtitleOffset ​

Dynamically set subtitle offset

▶ Run Code
js
var art = new Artplayer({
+art.on('ready', () => {
+    art.thumbnails = {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    };
+});

subtitleOffset ​

Dynamically set subtitle offset

▶ Run Code
js
var art = new Artplayer({
 	container: '.artplayer-app',
 	url: '/assets/sample/video.mp4',
     subtitle: {
@@ -486,8 +456,8 @@
 
 art.on('ready', () => {
     art.subtitleOffset = 1;
-});
- +}); + \ No newline at end of file diff --git a/docs/document/en/component/contextmenu.html b/docs/document/en/component/contextmenu.html index d24deb974..cefec544c 100644 --- a/docs/document/en/component/contextmenu.html +++ b/docs/document/en/component/contextmenu.html @@ -13,7 +13,7 @@ - + @@ -105,8 +105,8 @@ html: 'Your New Menu', }) }, 3000); -}); - +}); + \ No newline at end of file diff --git a/docs/document/en/component/controls.html b/docs/document/en/component/controls.html index 532ff88c3..7e373467b 100644 --- a/docs/document/en/component/controls.html +++ b/docs/document/en/component/controls.html @@ -13,7 +13,7 @@ - + @@ -152,8 +152,8 @@ ], }); }, 3000); -}); - +}); + \ No newline at end of file diff --git a/docs/document/en/component/layers.html b/docs/document/en/component/layers.html index e6102a63e..7ac5172f7 100644 --- a/docs/document/en/component/layers.html +++ b/docs/document/en/component/layers.html @@ -13,7 +13,7 @@ - + @@ -124,8 +124,8 @@ }, }); }, 3000); -}); - +}); + \ No newline at end of file diff --git a/docs/document/en/component/setting.html b/docs/document/en/component/setting.html index 565dbe01a..1b604dfff 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -13,7 +13,7 @@ - + @@ -141,41 +141,26 @@ ], }, ], -}); - -## Create - Toggle Button - -| Property | Type | Description | -| ---------- | ------------------- | ------------------------- | -| `html` | `String`, `Element` | DOM element of the item | -| `icon` | `String`, `Element` | Icon of the item | -| `switch` | `Boolean` | Default state of the button | -| `onSwitch` | `Function` | Button toggle event | -| `tooltip` | `String` | Tooltip text | - -<div className="run-code">▶ Run Code</div> - -```js -var art = new Artplayer({ - container: '.artplayer-app', - url: '/assets/sample/video.mp4', - setting: true, - settings: [ - { - html: 'PIP Mode', - tooltip: 'Close', - icon: '<img width="22" height="22" src="/assets/img/state.svg">', - switch: false, - onSwitch: function (item, $dom, event) { - console.info(item, $dom, event); - const nextState = !item.switch; - art.pip = nextState; - item.tooltip = nextState ? 'Open' : 'Close'; - return nextState; - }, - }, - ], -});

Create - Range Slider ​

PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
rangeArrayDefault state array
onRangeFunctionEvent triggered on completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+});

Create - Toggle Button ​

PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
switchBooleanDefault state of the button
onSwitchFunctionButton toggle event
tooltipStringTooltip text
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});

Create - Range Slider ​

PropertyTypeDescription
htmlString, ElementDOM element of the item
iconString, ElementIcon of the item
rangeArrayDefault state array
onRangeFunctionEvent triggered on completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
 const value = range[0];
 const min = range[1];
 const max = range[2];
@@ -259,8 +244,8 @@
             switch: false,
         });
     }, 3000);
-});
- +}); + \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 297e64ade..30520e085 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Artplayer.js

Appearance

Installation & Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

html
<html>
+    
Artplayer.js
Appearance
Installation & Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>
Note
The player's dimensions depend on the size of its container container, so your container must have defined dimensions.
See more usage examples at the following link:
/example
Vue.js ​
vue
<template>
+</html>
Note
The player's dimensions depend on the size of its container container, so your container must have defined dimensions.
See more usage examples at the following link:
/example
Vue.js ​
vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>
Artplayer is not reactive:
Directly modifying option in Vue.js will not update the player.
React.js ​
jsx
import Artplayer from 'artplayer'
+</script>
Artplayer is not reactive:
Directly modifying option in Vue.js will not update the player.
React.js ​
jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);
Legacy Browsers ​
The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version
For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you need to support even older browsers, modify the following configuration and build it yourself:
Build configuration: scripts/build.js
Reference documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
Legacy Browsers ​
The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version
For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you need to support even older browsers, modify the following configuration and build it yourself:
Build configuration: scripts/build.js
Reference documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>
Note
You need to modify it before importing the Artplayer dependency for it to take effect.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/en/start/i18n.html b/docs/document/en/start/i18n.html
index 66aa8cb01..3baf4f188 100644
--- a/docs/document/en/start/i18n.html
+++ b/docs/document/en/start/i18n.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
     
@@ -27,7 +27,7 @@
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -74,8 +74,8 @@
             Play: 'Your Play'
         },
     },
-});
- +}); + \ No newline at end of file diff --git a/docs/document/en/start/option.html b/docs/document/en/start/option.html index ec29b0dc3..966285b3e 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -13,7 +13,7 @@ - + @@ -91,23 +91,11 @@ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, -}); - -## `autoMini` - -- Type: `Boolean` -- Default: `false` - -Automatically enters `mini player` mode when the player scrolls out of the browser viewport. - -<div className="run-code">▶ Run Code</div> - -```js{4} -var art = new Artplayer({ - container: '.artplayer-app', - url: '/assets/sample/video.mp4', - autoMini: true, -});

loop ​

Whether to enable video looping.

▶ Run Code
js
var art = new Artplayer({
+});

autoMini ​

Automatically enters mini player mode when the player scrolls out of the browser viewport.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});

loop ​

Whether to enable video looping.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     loop: true,
@@ -166,23 +154,11 @@
         url: '/assets/sample/subtitle.srt',
     },
     setting: true,
-});
-
-## `miniProgressBar`
-
--   Type: `Boolean`
--   Default: `false`
-
-Mini progress bar that appears only when the player loses focus and is playing.
-
-<div className="run-code">▶ Run Code</div>
-
-```js{4}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

useSSR ​

Whether to use SSR mount mode. Useful if you want to pre-render the player's required HTML before mounting.

You can access the player's required HTML via Artplayer.html.

▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
+});

miniProgressBar ​

Mini progress bar that appears only when the player loses focus and is playing.

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

useSSR ​

Whether to use SSR mount mode. Useful if you want to pre-render the player's required HTML before mounting.

You can access the player's required HTML via Artplayer.html.

▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
 $container.innerHTML = Artplayer.html;
 
 var art = new Artplayer({
@@ -278,45 +254,21 @@
             },
         },
     ],
-});
-
-:::warning For `Component Configuration`, please refer to:
-
-[/component/controls.html](/component/controls.html)
-
-:::
-
-## `quality`
-
--   Type: `Array`
--   Default: `[]`
-
-Whether to display the `Quality Selection` list in the bottom control bar.
-
-| Property  | Type      | Description      |
-| --------- | --------- | ---------------- |
-| `default` | `Boolean` | Default quality  |
-| `html`    | `String`  | Quality name     |
-| `url`     | `String`  | Quality URL      |
-
-<div className="run-code">▶ Run Code</div>
-
-```js{4-14}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});

highlight ​

Display Highlight Information on the progress bar.

PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
▶ Run Code
js
var art = new Artplayer({
+});

For Component Configuration, please refer to:

/component/controls.html

quality ​

Whether to display the Quality Selection list in the bottom control bar.

PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});

highlight ​

Display Highlight Information on the progress bar.

PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     highlight: [
@@ -384,26 +336,14 @@
         'webkit-playsinline': true,
         playsInline: true,
     },
-});
-
-## `icons`
-
--   Type: `Object`
--   Default: `{}`
-
-Used to replace default icons, supports both `Html` strings and `HTMLElement`.
-
-<div className="run-code">▶ Run Code</div>
-
-```js{4-7}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});

All Icon Definitions

artplayer/types/icons.d.ts

type ​

Used to specify the video format. It needs to be used in conjunction with customType. By default, the video format is determined by the suffix of the video URL (e.g., .m3u8, .mkv, .ts). However, sometimes the video URL lacks the correct suffix, so explicit specification is necessary.

▶ Run Code
js
var art = new Artplayer({
+});

icons ​

Used to replace default icons, supports both Html strings and HTMLElement.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

All Icon Definitions

artplayer/types/icons.d.ts

type ​

Used to specify the video format. It needs to be used in conjunction with customType. By default, the video format is determined by the suffix of the video URL (e.g., .m3u8, .mkv, .ts). However, sometimes the video URL lacks the correct suffix, so explicit specification is necessary.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.m3u8',
     type: 'm3u8',
@@ -474,8 +414,8 @@
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
-});
- +}); + \ No newline at end of file diff --git a/docs/document/hashmap.json b/docs/document/hashmap.json index f3d3d8e9b..0c5233a9b 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_built-in.md":"DiyRIcIA","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"Bdw3azKs","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"CA7GaeI3","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"XdT81JC0","en_advanced_class.md":"BLyA7rxa","en_advanced_event.md":"CtQl1IYg","en_advanced_global.md":"D5Nz8wyo","en_advanced_plugin.md":"BOuMu80J","en_advanced_property.md":"urRMaqHe","en_component_contextmenu.md":"COLfX45a","en_component_controls.md":"BbQsn0wJ","en_component_layers.md":"CX93a7QS","en_component_setting.md":"C6o2AWtX","en_index.md":"Adx_P8Ii","en_start_i18n.md":"lFdcbEk9","en_start_option.md":"Bk4YXvof","index.md":"Bkwg5S8z","plugin_danmuku.md":"DSrWXJHB","start_i18n.md":"D3eO9wL_","start_option.md":"D52S8Ynf"} +{"advanced_built-in.md":"DiyRIcIA","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"Bdw3azKs","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"CA7GaeI3","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"B_F31aPz","en_advanced_class.md":"D17lDToP","en_advanced_event.md":"Cw7LYSEa","en_advanced_global.md":"DwHxhtQU","en_advanced_plugin.md":"Cnaq654P","en_advanced_property.md":"JV0Ib3j3","en_component_contextmenu.md":"Dn3gMYMB","en_component_controls.md":"BRzTYykf","en_component_layers.md":"B88JJHwY","en_component_setting.md":"C5z-_-Yy","en_index.md":"B6J2cqvj","en_start_i18n.md":"BhiDfadM","en_start_option.md":"Bei8B6RP","index.md":"CDZ-sHkw","plugin_danmuku.md":"pX46PRX9","start_i18n.md":"BrnMiJ2K","start_option.md":"D52S8Ynf"} diff --git a/docs/document/index.html b/docs/document/index.html index 3682768e8..49be1af96 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Artplayer.js

Appearance

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

html
<html>
+    
Artplayer.js
Appearance
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/example
Vue.js ​
vue
<template>
+</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/example
Vue.js ​
vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import Artplayer from 'artplayer'
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.6 开始，artplayer 和所有插件还会提供一个 ESM 版本的 mjs，如：
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.6 开始，artplayer 和所有插件还会提供一个 ESM 版本的 mjs，如：
  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>
提示
你需要在引入 Artplayer 依赖前来修改它才会生效

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/plugin/danmuku.html b/docs/document/plugin/danmuku.html
index 9975d7ac0..f38d4d1e7 100644
--- a/docs/document/plugin/danmuku.html
+++ b/docs/document/plugin/danmuku.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
     
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要text就可以发送一个弹幕，其余都是非必要参数
js
{
+    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要text就可以发送一个弹幕，其余都是非必要参数
js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认)，1: 顶部，2: 底部
@@ -367,7 +367,7 @@
 art.on('artplayerPluginDanmuku:destroy', () => {
     console.info('弹幕销毁');
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/start/i18n.html b/docs/document/start/i18n.html
index 3f49cecc0..3f423f505 100644
--- a/docs/document/start/i18n.html
+++ b/docs/document/start/i18n.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
     
@@ -27,7 +27,7 @@
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -75,7 +75,7 @@
         },
     },
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/start/option.html b/docs/document/start/option.html
index 0a7e22962..97fb23da3 100644
--- a/docs/document/start/option.html
+++ b/docs/document/start/option.html
@@ -415,7 +415,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });
- + \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/vite.config.ts b/packages/artplayer-vitepress/docs/vite.config.ts index 8adc6f0ab..a8b0a2103 100644 --- a/packages/artplayer-vitepress/docs/vite.config.ts +++ b/packages/artplayer-vitepress/docs/vite.config.ts @@ -1,7 +1,6 @@ import { SearchPlugin } from "vitepress-plugin-search"; -import { defineConfig } from "vite"; -export default defineConfig({ +export default { plugins: [ SearchPlugin({ placeholder: "Search docs", @@ -9,4 +8,4 @@ export default defineConfig({ previewLength: 62, }), ], -}); \ No newline at end of file +}; \ No newline at end of file