update docs

packages/artplayer-vitepress/docs/advanced/built-in.md

@@ -234,8 +234,10 @@ art.on('ready', () => {
 管理播放器的层
 
 - `add` 方法用于动态添加层
+- `remove` 方法用于动态删除层
+- `update` 方法用于动态更新层
 - `show` 属性用于设置是否显示全部层
-- `toggle` 属性用于切换是否显示全部层
+- `toggle` 方法用于切换是否显示全部层
 
 <div className="run-code">▶ Run Code</div>
 
@@ -267,8 +269,10 @@ art.on('ready', () => {
 管理播放器的控制器
 
 - `add` 方法用于动态添加控制器
+- `remove` 方法用于动态删除控制器
+- `update` 方法用于动态更新控制器
 - `show` 属性用于设置是否显示全部控制器
-- `toggle` 属性用于切换是否显示全部控制器
+- `toggle` 方法用于切换是否显示全部控制器
 
 <div className="run-code">▶ Run Code</div>
 
@@ -301,8 +305,10 @@ art.on('ready', () => {
 管理播放器的右键菜单
 
 - `add` 方法用于动态添加菜单
+- `remove` 方法用于动态删除菜单
+- `update` 方法用于动态更新菜单
 - `show` 属性用于设置是否显示全部菜单
-- `toggle` 属性用于切换是否显示全部菜单
+- `toggle` 方法用于切换是否显示全部菜单
 
 <div className="run-code">▶ Run Code</div>
 
@@ -438,9 +444,10 @@ art.on('ready', () => {
 管理播放器的设置面板
 
 - `add` 方法用于动态添加设置项
+- `remove` 方法用于动态删除设置项
+- `update` 方法用于动态更新设置项
 - `show` 属性用于设置是否显示全部设置项
-- `toggle` 属性用于切换是否显示全部设置项
-- `update` 方法动态更新设置项
+- `toggle` 方法用于切换是否显示全部设置项
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer-vitepress/docs/advanced/class.md

@@ -2,12 +2,6 @@
 
 这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
 
-:::warning 提示
-
-有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改
-
-:::
-
 ## `instances`
 
 返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
@@ -139,76 +133,4 @@ console.info(Artplayer.html);
 
 ```js
 console.info(Artplayer.option);
-```
-
-## `DEBUG`
-
-## `CONTEXTMENU`
-
-## `NOTICE_TIME`
-
-## `SETTING_WIDTH`
-
-## `SETTING_ITEM_WIDTH`
-
-## `SETTING_ITEM_HEIGHT`
-
-## `INDICATOR_SIZE`
-
-## `INDICATOR_SIZE_ICON`
-
-## `INDICATOR_SIZE_MOBILE`
-
-## `INDICATOR_SIZE_MOBILE_ICON`
-
-## `VOLUME_PANEL_WIDTH`
-
-## `VOLUME_HANDLE_WIDTH`
-
-## `RESIZE_TIME`
-
-## `SCROLL_TIME`
-
-## `SCROLL_GAP`
-
-## `AUTO_PLAYBACK_MAX`
-
-## `AUTO_PLAYBACK_MIN`
-
-## `AUTO_PLAYBACK_TIMEOUT`
-
-## `RECONNECT_TIME_MAX`
-
-## `RECONNECT_SLEEP_TIME`
-
-## `CONTROL_HIDE_TIME`
-
-## `DB_CLICE_TIME`
-
-## `MOBILE_AUTO_PLAYBACKRATE`
-
-## `MOBILE_AUTO_PLAYBACKRATE_TIME`
-
-## `MOBILE_AUTO_ORIENTATION_TIME`
-
-## `INFO_LOOP_TIME`
-
-## `FAST_FORWARD_VALUE`
-
-## `FAST_FORWARD_TIME`
-
-## `TOUCH_MOVE_RATIO`
-
-## `VOLUME_STEP`
-
-## `SEEK_STEP`
-
-## `PROGRESS_HEIGHT`
-
-## `PLAYBACK_RATE`
-
-## `ASPECT_RATIO`
-
-## `FLIP`
-
-## `FULLSCREEN_WEB_IN_BODY`
+```

packages/artplayer-vitepress/docs/advanced/event.md

@@ -102,8 +102,25 @@ art.on('ready', () => {
     art.url = '/assets/sample/video.mp4'
 });
 
-art.on('restart', () => {
-    console.info('restart');
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
+```
+
+## `loop`
+
+当出现区间循环时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loop', (start, end) => {
+    console.info('loop', start, end);
 });
 ```
 
@@ -179,27 +196,6 @@ art.on('destroy', () => {
 });
 ```
 
-## `url`
-
-当视频地址变化时触发
-
-<div className="run-code">▶ Run Code</div>
-
-```js{10}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0'
-});
-
-art.on('url', (url) => {
-    console.info('url', url);
-});
-```
-
 ## `focus`
 
 当播放器获得焦点时触发
@@ -212,8 +208,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('focus', () => {
-    console.info('focus');
+art.on('focus', (event) => {
+    console.info('focus', event);
 });
 ```
 
@@ -229,8 +225,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('blur', () => {
-    console.info('blur');
+art.on('blur', (event) => {
+    console.info('blur', event);
 });
 ```
 
@@ -246,8 +242,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('dblclick', () => {
-    console.info('dblclick');
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
 });
 ```
 
@@ -263,8 +259,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('click', () => {
-    console.info('click');
+art.on('click', (event) => {
+    console.info('click', event);
 });
 ```
 
@@ -297,8 +293,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('hover', (state) => {
-    console.info('hover', state);
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
 });
 ```
 
@@ -353,6 +349,24 @@ art.on('view', (state) => {
 });
 ```
 
+## `lock`
+
+在移动端，当锁定的状态发生变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
+```
+
 ## `aspectRatio`
 
 当播放器长宽比变化时触发

packages/artplayer-vitepress/docs/advanced/property.md

@@ -907,4 +907,25 @@ var art = new Artplayer({
 });
 
 console.info(art.video);
+```
+
+## `cssVar`
+
+-   Type: `Function`
+
+动态获取或设置 `css` 变量
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
 ```

packages/artplayer-vitepress/docs/component/controls.md

@@ -64,7 +64,7 @@ var art = new Artplayer({
 
 // Get the Element of control by name
 console.info(art.controls['your-button']);
-console.info(art.controls.subtitle);
+console.info(art.controls['subtitle']);
 ```
 
 ## 添加
@@ -95,7 +95,7 @@ art.controls.add({
 });
 
 // Get the Element of control by name
-console.info(art.controls.button1);
+console.info(art.controls['button1']);
 ```
 
 ## 删除