diff --git a/packages/artplayer-document/docs/zh-cn/Advance.md b/packages/artplayer-document/docs/zh-cn/Advance.md
new file mode 100644
index 000000000..57660533c
--- /dev/null
+++ b/packages/artplayer-document/docs/zh-cn/Advance.md
@@ -0,0 +1,442 @@
+---
+title: 高级属性
+sidebar_position: 4
+slug: /zh-cn/advance
+---
+
+:::tip 提示
+
+这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读
+
+:::
+
+## id
+
+- 类型: `Number`
+
+播放器实例的一个自增编号
+
+## option
+
+- 类型: `Object`
+
+播放器实例的参数对象
+
+## isFocus
+
+- 类型: `Boolean`
+
+播放器实例是否获得了焦点，如最后被用户点击过
+
+## isDestroy
+
+- 类型: `Boolean`
+
+播放器实例是否被销毁
+
+## userAgent
+
+- 类型: `Boolean`
+
+等于 `window.navigator.userAgent`
+
+## isMobile
+
+- 类型: `Boolean`
+
+当前环境是否移动设备
+
+## isWechat
+
+- 类型: `Boolean`
+
+当前环境是否微信设备
+
+## whitelist
+
+- 类型: `Object`
+
+管理白名单的对象
+
+## template
+
+- 类型: `Object`
+
+管理播放器 `Html` 的对象
+
+## storage
+
+- 类型: `Object`
+
+管理持久化存储的对象
+
+## icons
+
+- 类型: `Object`
+
+管理图标的对象
+
+## i18n
+
+- 类型: `Object`
+
+管理多语言的对象
+
+## player
+
+- 类型: `Object`
+
+管理核心功能的对象
+
+## subtitle
+
+- 类型: `Object`
+
+管理字幕的对象
+
+## info
+
+- 类型: `Object`
+
+管理统计信息的对象
+
+## layers
+
+- 类型: `Object`
+
+管理业务层的对象
+
+属性 `show` 可以控制全部图层是否显示
+
+▶ Run Code
+
+```js
+var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ layers: [
+ {
+ html: `
`,
+ style: {
+ position: 'absolute',
+ top: '20px',
+ right: '20px',
+ opacity: '.9',
+ },
+ },
+ ],
+});
+
+art.on('ready', () => {
+ setTimeout(() => {
+ art.layers.show = false;
+ }, 3000);
+})
+```
+
+方法 `add` 可以动态添加业务层，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+var img = '/assets/sample/layer.png';
+art.on('ready', () => {
+ setTimeout(() => {
+ art.layers.add({
+ html: ``,
+ style: {
+ position: 'absolute',
+ top: '20px',
+ right: '20px',
+ opacity: '.9',
+ },
+ });
+ }, 3000);
+})
+```
+
+## notice
+
+- 类型: `Object`
+
+管理提示信息的对象
+
+属性 `show` 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.notice.show = '自定义提示信息1';
+ art.notice.show = '自定义提示信息2';
+})
+```
+
+## controls
+
+- 类型: `Object`
+
+管理业务层的对象
+
+属性 `show` 可以控制控制栏是否显示
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ setTimeout(() => {
+ art.controls.show = false;
+ }, 3000);
+})
+```
+
+方法 `add` 可以动态添加控制器，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ setTimeout(() => {
+ art.controls.add({
+ position: 'right',
+ index: 10,
+ html: '自定义按钮',
+ tooltip: '自定义按钮的提示',
+ click: function () {
+ console.log('你点击了自定义按钮');
+ },
+ });
+ }, 3000);
+})
+```
+
+## contextmenu
+
+- 类型: `Object`
+
+管理右键菜单的对象
+
+属性 `show` 可以控制菜单是否显示
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.contextmenu.show = true;
+ setTimeout(() => {
+ art.contextmenu.show = false;
+ }, 3000);
+})
+```
+
+方法 `add` 可以动态添加菜单项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.contextmenu.show = true;
+ setTimeout(() => {
+ art.contextmenu.add({
+ html: '自定义菜单',
+ click: function () {
+ console.info('你点击了自定义菜单');
+ art.contextmenu.show = false;
+ },
+ });
+ }, 3000);
+})
+```
+
+## loading
+
+- 类型: `Object`
+
+管理提示信息的对象
+
+属性 `show` 可以控制菜单是否加载层
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.loading.show = true;
+ setTimeout(() => {
+ art.loading.show = false;
+ }, 3000);
+})
+```
+
+## mask
+
+- 类型: `Object`
+
+管理遮罩层的对象
+
+属性 `show` 可以控制遮罩层是否加载层
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.mask.show = true;
+ setTimeout(() => {
+ art.mask.show = false;
+ }, 3000);
+})
+```
+
+## hotkey
+
+- 类型: `Object`
+
+管理快捷键的对象
+
+方法 `add` 可以动态添加快捷键，第一个参数是 `key code` 数字，第二个参数是回调函数
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.hotkey.add(65, () => {
+ console.info('你点击了 A 键')
+ })
+
+ art.hotkey.add(66, () => {
+ console.info('你点击了 B 键')
+ })
+})
+```
+
+:::tip 提示
+
+只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效
+
+:::
+
+## setting
+
+- 类型: `Object`
+
+管理设置面板的对象
+
+属性 `show` 可以控制设置面板是否显示
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ setting: true,
+ autoSize: true,
+});
+
+art.on('ready', () => {
+ art.seek = 20;
+ art.setting.show = true;
+ setTimeout(() => {
+ art.setting.show = false;
+ }, 3000);
+})
+```
+
+方法 `add` 可以动态添加设置项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ setting: true,
+ autoSize: true,
+});
+
+art.on('ready', () => {
+ art.seek = 20;
+ art.setting.show = true;
+ art.setting.add({
+ html: '自定义设置',
+ click: function () {
+ console.info('你点击了自定义设置');
+ art.setting.show = false;
+ },
+ });
+})
+```
+
+## plugins
+
+- 类型: `Object`
+
+管理插件的对象
+
+方法 `add` 可以动态添加插件，更多信息请访问 [自定义插件的使用](/document/zh-cn/Questions/plugin)
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.plugins.add(function myPlugin(art) {
+ console.info('myPlugin running...');
+ return {
+ something: 'something',
+ doSomething: function () {
+ console.info('Do something here...');
+ },
+ };
+ });
+})
+```
\ No newline at end of file
diff --git a/packages/artplayer-document/docs/zh-cn/Class.md b/packages/artplayer-document/docs/zh-cn/Class.md
index 243e238c1..2b737b860 100644
--- a/packages/artplayer-document/docs/zh-cn/Class.md
+++ b/packages/artplayer-document/docs/zh-cn/Class.md
@@ -1,5 +1,5 @@
---
title: 静态属性
-sidebar_position: 5
+sidebar_position: 6
slug: /zh-cn/class
---
diff --git a/packages/artplayer-document/docs/zh-cn/Events.md b/packages/artplayer-document/docs/zh-cn/Events.md
index 2758638d2..6cc4c18c9 100644
--- a/packages/artplayer-document/docs/zh-cn/Events.md
+++ b/packages/artplayer-document/docs/zh-cn/Events.md
@@ -1,5 +1,5 @@
---
title: 实例事件
-sidebar_position: 4
+sidebar_position: 5
slug: /zh-cn/events
---
diff --git a/packages/artplayer-document/docs/zh-cn/Libraries.md b/packages/artplayer-document/docs/zh-cn/Libraries.md
index 66e1010e0..472b9d0f3 100644
--- a/packages/artplayer-document/docs/zh-cn/Libraries.md
+++ b/packages/artplayer-document/docs/zh-cn/Libraries.md
@@ -1,5 +1,5 @@
---
title: 第三方库
-sidebar_position: 6
+sidebar_position: 7
slug: /zh-cn/libraries
---
diff --git a/packages/artplayer-document/docs/zh-cn/Properties.md b/packages/artplayer-document/docs/zh-cn/Properties.md
index 534bf8005..2b4ea043e 100644
--- a/packages/artplayer-document/docs/zh-cn/Properties.md
+++ b/packages/artplayer-document/docs/zh-cn/Properties.md
@@ -1,5 +1,5 @@
---
-title: 实例属性
+title: 常用属性
sidebar_position: 3
slug: /zh-cn/propertie
---
@@ -181,6 +181,56 @@ art.on('ready', () => {
})
```
+## switchUrl
+
+- 类型: `Function`
+- 参数: `String`
+
+设置视频地址，设置时和 `url` 类似，但会执行一些优化操作
+
+函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.seek = 10;
+ setTimeout(() => {
+ art.switchUrl('/assets/sample/video.mp4?t=0', '新视频地址');
+ }, 3000);
+})
+```
+
+## switchQuality
+
+- 类型: `Function`
+- 参数: `String`
+
+设置视频画质地址，和 `switchQuality` 类似，但会带上之前的播放进度
+
+函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
+
+▶ Run Code
+
+```js
+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
- 类型: `Setter/Getter`
@@ -514,41 +564,139 @@ art.on('ready', () => {
:::
-```js
-[
- "option",
- "isFocus",
- "isDestroy",
- "userAgent",
- "isMobile",
- "isWechat",
- "whitelist",
- "template",
- "events",
- "storage",
- "icons",
- "i18n",
- "notice",
+## flip
- "flip",
- "loop",
- "rotate",
- "switchQuality",
- "switchUrl",
- "playbackRate",
- "aspectRatio",
-
- "player",
- "layers",
- "controls",
- "contextmenu",
- "subtitle",
- "info",
- "loading",
- "hotkey",
- "mask",
- "setting",
- "plugins",
- "id"
-]
+- 类型: `Setter/Getter`
+- 参数: `String`
+
+设置和获取播放器翻转，支持`normal`、 `horizontal`、 `vertical`
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ console.info(art.flip)
+ art.flip = 'horizontal'
+ console.info(art.flip)
+})
+```
+
+## rotate
+
+- 类型: `Setter/Getter`
+- 参数: `Number`
+
+设置和获取播放器旋转，支持 `-270`、`-180`、`-90`、`0`、`90`、`180`、`270`
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ autoSize: true,
+});
+
+art.on('ready', () => {
+ console.info(art.rotate)
+ art.rotate = 90
+ console.info(art.rotate)
+})
+```
+
+## playbackRate
+
+- 类型: `Setter/Getter`
+- 参数: `Number`
+
+设置和获取播放器播放速度，支持`0.5`、`0.75`、`1.0`、`1.25`、`1.5`、`1.75`、`2.0`
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ console.info(art.playbackRate)
+ art.playbackRate = 2
+ console.info(art.playbackRate)
+})
+```
+
+## aspectRatio
+
+- 类型: `Setter/Getter`
+- 参数: `String`
+
+设置和获取播放器长宽比，支持`default`、`4:3`、`16:9`
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ console.info(art.aspectRatio)
+ art.aspectRatio = '16:9'
+ console.info(art.aspectRatio)
+})
+```
+
+## loop
+
+- 类型: `Setter/Getter`
+- 参数: `Array`
+
+设置和获取区间循序播放，单位秒
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ console.info(art.loop)
+ art.loop = [5, 10];
+ console.info(art.loop)
+})
+```
+
+:::tip 提示
+
+删除区间循环播放，只需要设置 `loop` 为 `[]` 即可
+
+:::
+
+## destroy
+
+- 类型: `Function`
+- 参数: `Boolean`
+
+销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
+
+▶ Run Code
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+ art.destroy();
+})
```
\ No newline at end of file