update

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` 可以控制全部图层是否显示
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        art.layers.show = false;
+    }, 3000);
+})
+```
+
+方法 `add` 可以动态添加业务层，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
+
+<div className="run-code">▶ Run Code</div>
+
+```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: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+        });
+    }, 3000);
+})
+```
+
+## notice
+
+-   类型: `Object`
+
+管理提示信息的对象
+
+属性 `show` 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 可以控制控制栏是否显示
+
+<div className="run-code">▶ Run Code</div>
+
+```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)
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 可以控制菜单是否显示
+
+<div className="run-code">▶ Run Code</div>
+
+```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)
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 可以控制菜单是否加载层
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 可以控制遮罩层是否加载层
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 数字，第二个参数是回调函数
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 可以控制设置面板是否显示
+
+<div className="run-code">▶ Run Code</div>
+
+```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)
+
+<div className="run-code">▶ Run Code</div>
+
+```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)
+
+<div className="run-code">▶ Run Code</div>
+
+```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...');
+            },
+        };
+    });
+})
+```

packages/artplayer-document/docs/zh-cn/Class.md

@@ -1,5 +1,5 @@
 ---
 title: 静态属性
-sidebar_position: 5
+sidebar_position: 6
 slug: /zh-cn/class
 ---

packages/artplayer-document/docs/zh-cn/Events.md

@@ -1,5 +1,5 @@
 ---
 title: 实例事件
-sidebar_position: 4
+sidebar_position: 5
 slug: /zh-cn/events
 ---

packages/artplayer-document/docs/zh-cn/Libraries.md

@@ -1,5 +1,5 @@
 ---
 title: 第三方库
-sidebar_position: 6
+sidebar_position: 7
 slug: /zh-cn/libraries
 ---

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` 类似，但会执行一些优化操作
+
+函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
+
+<div className="run-code">▶ Run Code</div>
+
+```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` 类似，但会带上之前的播放进度
+
+函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字
+
+<div className="run-code">▶ Run Code</div>
+
+```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
+## flip
-[
-    "option",
-    "isFocus",
-    "isDestroy",
-    "userAgent",
-    "isMobile",
-    "isWechat",
-    "whitelist",
-    "template",
-    "events",
-    "storage",
-    "icons",
-    "i18n",
-    "notice",
 
-    "flip",
+-   类型: `Setter/Getter`
-    "loop",
+-   参数: `String`
-    "rotate",
+
-    "switchQuality",
+设置和获取播放器翻转，支持`normal`、 `horizontal`、 `vertical`
-    "switchUrl",
+
-    "playbackRate",
+<div className="run-code">▶ Run Code</div>
-    "aspectRatio",
+
-    
+```js
-    "player",
+var art = new Artplayer({
-    "layers",
+    container: '.artplayer-app',
-    "controls",
+    url: '/assets/sample/video.mp4',
-    "contextmenu",
+});
-    "subtitle",
+
-    "info",
+art.on('ready', () => {
-    "loading",
+    console.info(art.flip)
-    "hotkey",
+    art.flip = 'horizontal'
-    "mask",
+    console.info(art.flip)
-    "setting",
+})
-    "plugins",
+```
-    "id"
+
-]
+## rotate
+
+-   类型: `Setter/Getter`
+-   参数: `Number`
+
+设置和获取播放器旋转，支持 `-270`、`-180`、`-90`、`0`、`90`、`180`、`270`
+
+<div className="run-code">▶ Run Code</div>
+
+```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`
+
+<div className="run-code">▶ Run Code</div>
+
+```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`
+
+<div className="run-code">▶ Run Code</div>
+
+```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`
+
+设置和获取区间循序播放，单位秒
+
+<div className="run-code">▶ Run Code</div>
+
+```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`
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+})
 ```