add settings

packages/artplayer-document/docs/en/Options.md

@@ -618,6 +618,62 @@ var art = new Artplayer({
 });
 ```
 
+## settings
+
+-   Type: `Array`
+-   Default: `[]`
+
+Initialize custom setting panel
+
+| Property  | Type                | Description                                                   |
+| --------- | ------------------- | ------------------------------------------------------------- |
+| `disable` | `Boolean`           | Whether to disable the component                              |
+| `name`    | `String`            | The unique name of the component, used to mark the class name |
+| `index`   | `Number`            | Component index, priority for display                         |
+| `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`            | Prompt text of the component                                  |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            disable: false,
+            name: 'button',
+            index: 10,
+            html: 'Custom button1',
+            tooltip: 'Custom button1',
+            style: {
+                color: 'red',
+            },
+            click: function () {
+                console.log('You clicked custom button 1');
+            },
+            mounted: function () {
+                console.log('Custom button mounting is complete 1');
+            },
+        },
+        {
+            html: 'Custom button2',
+            tooltip: 'Custom button2',
+            style: {
+                color: 'green',
+            },
+            click: function () {
+                console.log('You clicked custom button 2');
+            },
+        },
+    ],
+});
+```
+
 ## contextmenu
 
 -   Type: `Array`

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

@@ -618,6 +618,62 @@ var art = new Artplayer({
 });
 ```
 
+## settings
+
+-   类型: `Array`
+-   默认: `[]`
+
+初始化自定义的设置面板
+
+| 属性      | 类型                | 描述                       |
+| --------- | ------------------- | -------------------------- |
+| `disable` | `Boolean`           | 是否禁用组件               |
+| `name`    | `String`            | 组件唯一名称，用于标记类名 |
+| `index`   | `Number`            | 组件索引，用于显示的优先级 |
+| `html`    | `String`、`Element` | 组件的 DOM 元素            |
+| `style`   | `Object`            | 组件样式对象               |
+| `click`   | `Function`          | 组件点击事件               |
+| `mounted` | `Function`          | 组件挂载后触发             |
+| `tooltip` | `String`            | 组件的提示文本             |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            disable: false,
+            name: 'button',
+            index: 10,
+            html: '自定义按钮',
+            tooltip: '自定义按钮的提示1',
+            style: {
+                color: 'red',
+            },
+            click: function () {
+                console.log('你点击了自定义按钮1');
+            },
+            mounted: function () {
+                console.log('自定义按钮挂载完成1');
+            },
+        },
+        {
+            html: '自定义按钮2',
+            tooltip: '自定义按钮的提示2',
+            style: {
+                color: 'green',
+            },
+            click: function () {
+                console.log('你点击了自定义按钮2');
+            },
+        },
+    ],
+});
+```
+
 ## contextmenu
 
 -   类型: `Array`

packages/artplayer-document/docs/zh-cn/Questions/Handle single component.md

@@ -50,13 +50,13 @@ art.on('ready', () => {
         }
     });
 
-    // Use the query method to get the DOM element of the component
+    // 使用查询 query 获取组件的DOM元素
     var $layer1 = art.query('.art-layer-layer1');
     var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
     var $control1 = art.query('.art-control-control1');
     var $setting1 = art.query('.art-setting-setting1');
 
-    // Recommended use the name to get the DOM element of the component
+    // 推荐使用 name 获取组件的DOM元素
     var $layer1 = art.layers['layer1'];
     var $contextmenu1 = art.contextmenu['contextmenu1'];
     var $control1 = art.controls['control1'];