update docs

This commit is contained in:
Harvey Zack committed 2023-04-29 22:52:08 +08:00
1 parent 6264a54f93
commit ab57157371
9 files changed
+217 -157

No files matched your search

@@ -54,6 +54,7 @@ const config = {
{ text: '实例属性', link: '/advanced/property' },
{ text: '高级属性', link: '/advanced/built-in' },
{ text: '静态属性', link: '/advanced/class' },
{ text: '全局属性', link: '/advanced/global' },
{ text: '实例事件', link: '/advanced/event' },
{ text: '编写插件', link: '/advanced/plugin' },
]
@@ -106,6 +107,7 @@ const config = {
{ text: 'Instance Property', link: '/en/advanced/property' },
{ text: 'Advanced Property', link: '/en/advanced/built-in' },
{ text: 'Static Property', link: '/en/advanced/class' },
{ text: 'Global Property', link: '/en/advanced/global' },
{ text: 'Instance Event', link: '/en/advanced/event' },
{ text: 'Writing Plugin', link: '/en/advanced/plugin' },
]
@@ -0,0 +1,65 @@
# 全局属性
## DEBUG
## CONTEXTMENU
## NOTICE_TIME
## SETTING_WIDTH
## SETTING_ITEM_WIDTH
## SETTING_ITEM_HEIGHT
## RESIZE_TIME
## SCROLL_TIME
## SCROLL_GAP
## AUTO_PLAYBACK_MAX
## AUTO_PLAYBACK_MIN
## AUTO_PLAYBACK_TIMEOUT
## RECONNECT_TIME_MAX
## RECONNECT_SLEEP_TIME
## CONTROL_HIDE_TIME
## DBCLICK_TIME
## DBCLICK_FULLSCREEN
## MOBILE_DBCLICK_PLAY
## MOBILE_CLICK_PLAY
## 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
## PLAYBACK_RATE
## ASPECT_RATIO
## FLIP
## FULLSCREEN_WEB_IN_BODY
@@ -2,7 +2,7 @@
## 内置
需先打开设置面板,然后自带四个内置项:`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
须先打开设置面板,然后自带四个内置项:`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
<div className="run-code">▶ Run Code</div>
@@ -140,75 +140,3 @@ 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`
@@ -0,0 +1,65 @@
# Global Property
## DEBUG
## CONTEXTMENU
## NOTICE_TIME
## SETTING_WIDTH
## SETTING_ITEM_WIDTH
## SETTING_ITEM_HEIGHT
## RESIZE_TIME
## SCROLL_TIME
## SCROLL_GAP
## AUTO_PLAYBACK_MAX
## AUTO_PLAYBACK_MIN
## AUTO_PLAYBACK_TIMEOUT
## RECONNECT_TIME_MAX
## RECONNECT_SLEEP_TIME
## CONTROL_HIDE_TIME
## DBCLICK_TIME
## DBCLICK_FULLSCREEN
## MOBILE_DBCLICK_PLAY
## MOBILE_CLICK_PLAY
## 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
## PLAYBACK_RATE
## ASPECT_RATIO
## FLIP
## FULLSCREEN_WEB_IN_BODY
@@ -1,19 +1,19 @@
# 右键菜单
# Contextmenu
## 配置
## Config
| 属性 | 类型 | 描述 |
| --------- | ------------------- | -------------------------- |
| `disable` | `Boolean` | 是否禁用组件 |
| `name` | `String` | 组件唯一名称,用于标记类名 |
| `index` | `Number` | 组件索引,用于显示的优先级 |
| `html` | `String`, `Element` | 组件的 DOM 元素 |
| `style` | `Object` | 组件样式对象 |
| `click` | `Function` | 组件点击事件 |
| `mounted` | `Function` | 组件挂载后触发 |
| `tooltip` | `String` | 组件的提示文本 |
| Property | Type | Describe |
| --------- | ------------------- | ---------------------------------------------- |
| `disable` | `Boolean` | Whether to disable the component |
| `name` | `String` | Component unique name, used to mark class name |
| `index` | `Number` | Component index, used for display priority |
| `html` | `String`, `Element` | DOM element of the component |
| `style` | `Object` | component style object |
| `click` | `Function` | Component click event |
| `mounted` | `Function` | Triggered after the component is mounted |
| `tooltip` | `String` | Tooltip text for the component |
## 创建
## Init
<div className="run-code">▶ Run Code</div>
@@ -39,7 +39,7 @@ art.contextmenu.show = true;
console.info(art.contextmenu['your-menu']);
```
## 添加
## Add
<div className="run-code">▶ Run Code</div>
@@ -64,7 +64,7 @@ art.contextmenu.show = true;
console.info(art.contextmenu['your-menu']);
```
## 删除
## Remove
<div className="run-code">▶ Run Code</div>
@@ -94,7 +94,7 @@ art.on('ready', () => {
});
```
## 更新
## Update
<div className="run-code">▶ Run Code</div>
@@ -1,22 +1,22 @@
# 控制器
# Controls
## 配置
## Config
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | ------------------------------------------ |
| `disable` | `Boolean` | 是否禁用组件 |
| `name` | `String` | 组件唯一名称,用于标记类名 |
| `index` | `Number` | 组件索引,用于显示的优先级 |
| `html` | `String`, `Element` | 组件的 DOM 元素 |
| `style` | `Object` | 组件样式对象 |
| `click` | `Function` | 组件点击事件 |
| `mounted` | `Function` | 组件挂载后触发 |
| `tooltip` | `String` | 组件的提示文本 |
| `position` | `String` | `left` 和 `right` 控制控制器出现的左右位置 |
| `selector` | `Array` | 选择列表的对象数组 |
| `onSelect` | `Function` | 选择列表的元素被点击时触发的函数 |
| Property | Type | Describe |
| ---------- | ------------------- | ------------------------------------------------------------------------------------ |
| `disable` | `Boolean` | Whether to disable the component |
| `name` | `String` | Component unique name, used to mark class name |
| `index` | `Number` | Component index, used for display priority |
| `html` | `String`, `Element` | DOM element of the component |
| `style` | `Object` | component style object |
| `click` | `Function` | Component click event |
| `mounted` | `Function` | Triggered after the component is mounted |
| `tooltip` | `String` | Tooltip text for the component |
| `position` | `String` | `left` and `right` control the left and right positions where the controller appears |
| `selector` | `Array` | Array of objects for the select list |
| `onSelect` | `Function` | A function that is triggered when an element of the select list is clicked |
## 创建
## Init
<div className="run-code">▶ Run Code</div>
@@ -67,7 +67,7 @@ console.info(art.controls['your-button']);
console.info(art.controls.subtitle);
```
## 添加
## Add
<div className="run-code">▶ Run Code</div>
@@ -98,7 +98,7 @@ art.controls.add({
console.info(art.controls.button1);
```
## 删除
## Remove
<div className="run-code">▶ Run Code</div>
@@ -128,7 +128,7 @@ art.on('ready', () => {
});
```
## 更新
## Update
<div className="run-code">▶ Run Code</div>
@@ -1,19 +1,19 @@
# 业务层
# Layers
## 配置
## Config
| 属性 | 类型 | 描述 |
| --------- | ------------------- | -------------------------- |
| `disable` | `Boolean` | 是否禁用组件 |
| `name` | `String` | 组件唯一名称,用于标记类名 |
| `index` | `Number` | 组件索引,用于显示的优先级 |
| `html` | `String`, `Element` | 组件的 DOM 元素 |
| `style` | `Object` | 组件样式对象 |
| `click` | `Function` | 组件点击事件 |
| `mounted` | `Function` | 组件挂载后触发 |
| `tooltip` | `String` | 组件的提示文本 |
| Property | Type | Describe |
| --------- | ------------------- | ---------------------------------------------- |
| `disable` | `Boolean` | Whether to disable the component |
| `name` | `String` | Component unique name, used to mark class name |
| `index` | `Number` | Component index, used for display priority |
| `html` | `String`, `Element` | DOM element of the component |
| `style` | `Object` | component style object |
| `click` | `Function` | Component click event |
| `mounted` | `Function` | Triggered after the component is mounted |
| `tooltip` | `String` | Tooltip text for the component |
## 创建
## Init
<div className="run-code">▶ Run Code</div>
@@ -46,7 +46,7 @@ var art = new Artplayer({
console.info(art.layers['potser']);
```
## 添加
## Add
<div className="run-code">▶ Run Code</div>
@@ -78,7 +78,7 @@ art.layers.add({
console.info(art.layers['potser']);
```
## 删除
## Remove
<div className="run-code">▶ Run Code</div>
@@ -108,7 +108,7 @@ art.on('ready', () => {
});
```
## 更新
## Update
<div className="run-code">▶ Run Code</div>
@@ -1,8 +1,8 @@
# 设置面板
# Setting
## 内置
## Build-in
需先打开设置面板,然后自带四个内置项:`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
You must open the settings panel first, and then come with four built-in items:`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
<div className="run-code">▶ Run Code</div>
@@ -19,16 +19,16 @@ var art = new Artplayer({
```
## 创建 - 选择列表
## Init - Select list
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | ------------ |
| `html` | `String`, `Element` | 元素的 DOM |
| `icon` | `String`, `Element` | 元素的图标 |
| `selector` | `Array` | 元素列表 |
| `onSelect` | `Function` | 元素点击事件 |
| `width` | `Number` | 列表宽度 |
| `tooltip` | `String` | 提示文本 |
| Property | Type | Describe |
| ---------- | ------------------- | ------------------- |
| `html` | `String`, `Element` | Element DOM |
| `icon` | `String`, `Element` | Element icon |
| `selector` | `Array` | Element list |
| `onSelect` | `Function` | Element click event |
| `width` | `Number` | List width |
| `tooltip` | `String` | Prompt text |
<div className="run-code">▶ Run Code</div>
@@ -88,7 +88,7 @@ var art = new Artplayer({
});
```
## 创建 - 列表嵌套
## Init - list nesting
<div className="run-code">▶ Run Code</div>
@@ -139,15 +139,15 @@ var art = new Artplayer({
});
```
## 创建 - 切换按钮
## Init - Switch button
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | --------------- |
| `html` | `String`, `Element` | 元素的 DOM 元素 |
| `icon` | `String`, `Element` | 元素的图标 |
| `switch` | `Boolean` | 按钮默认状态 |
| `onSwitch` | `Function` | 按钮切换事件 |
| `tooltip` | `String` | 提示文本 |
| Property | Type | Describe |
| ---------- | ------------------- | -------------------- |
| `html` | `String`, `Element` | Element DOM |
| `icon` | `String`, `Element` | Element icon |
| `switch` | `Boolean` | Button default state |
| `onSwitch` | `Function` | Button toggle event |
| `tooltip` | `String` | Prompt text |
<div className="run-code">▶ Run Code</div>
@@ -174,16 +174,16 @@ var art = new Artplayer({
});
```
## 创建 - 范围滑块
## Init - Range slider
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | ---------------- |
| `html` | `String`, `Element` | 元素的 DOM 元素 |
| `icon` | `String`, `Element` | 元素的图标 |
| `range` | `Array` | 默认状态数组 |
| `onRange` | `Function` | 完成时触发的事件 |
| `onChange` | `Function` | 变化时触发的事件 |
| `tooltip` | `String` | 提示文本 |
| Property | Type | Describe |
| ---------- | ------------------- | ------------------------- |
| `html` | `String`, `Element` | Element DOM |
| `icon` | `String`, `Element` | Element icon |
| `range` | `Array` | Default state array |
| `onRange` | `Function` | Event fired on completion |
| `onChange` | `Function` | Event fired on change |
| `tooltip` | `String` | Prompt text |
```js
const range = [5, 1, 10, 1];
@@ -215,7 +215,7 @@ var art = new Artplayer({
});
```
## 添加
## Add
<div className="run-code">▶ Run Code</div>
@@ -236,7 +236,7 @@ art.setting.add({
});
```
## 删除
## Remove
<div className="run-code">▶ Run Code</div>
@@ -267,7 +267,7 @@ art.on('ready', () => {
});
```
## 更新
## Update
<div className="run-code">▶ Run Code</div>