update

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

@@ -550,7 +550,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom setting panel, please visit [How to add setting](/document/Questions/)
+Initialize custom setting panel, please visit [How to add setting panel](/document/en/Questions/How%20to%20add%20setting%20panel)
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +562,24 @@ var art = new Artplayer({
     settings: [
         {
             html: 'Custom setting 01',
-            items: [
+            children: [
+                {
+                    html: 'Submenu 01',
+                    click: function() {
+                        console.log('You click on the submenu 01');
+                    }
+                },
+                {
+                    html: 'Submenu 02',
+                    click: function() {
+                        console.log('You click on the submenu 02');
+                    }
+                },
+            ]
+        },
+        {
+            html: 'Custom setting 02',
+            children: [
                 {
                     html: 'Submenu 01',
                     click: function() {

packages/artplayer-document/docs/en/Questions/How to add setting panel.md

@@ -0,0 +1,4 @@
+---
+title: How to add setting panel
+sidebar_position: 6
+---

packages/artplayer-document/docs/en/Questions/How to add setting.md

@@ -1,4 +0,0 @@
----
-title: How to add setting
-sidebar_position: 6
----

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

@@ -550,7 +550,7 @@ var art = new Artplayer({
 -   类型: `Array`
 -   默认: `[]`
 
-初始化自定义的设置面板，更多信息请访问 [怎么添加设置面板](/document/zh-cn/Questions/)
+初始化自定义的设置面板，更多信息请访问 [怎么添加设置面板](/document/zh-cn/Questions/How%20to%20add%20setting%20panel)
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +562,24 @@ var art = new Artplayer({
     settings: [
         {
             html: '自定义设置01',
-            items: [
+            children: [
+                {
+                    html: '子菜单01',
+                    click: function() {
+                        console.log('你点击了子菜单01');
+                    }
+                },
+                {
+                    html: '子菜单02',
+                    click: function() {
+                        console.log('你点击了子菜单01');
+                    }
+                },
+            ]
+        },
+        {
+            html: '自定义设置02',
+            children: [
                 {
                     html: '子菜单01',
                     click: function() {

packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md

@@ -0,0 +1,44 @@
+---
+title: 怎么添加设置面板
+sidebar_position: 6
+---
+
+设置面板类似于列表选择的集合，而且支持多层嵌套
+
+### 切换字幕
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+
+                art.subtitle.url = item.url;
+                
+                return '你点击了 ' + item.html;
+            },
+        },
+    ],
+});
+```

packages/artplayer-document/docs/zh-cn/Questions/How to add setting.md

@@ -1,4 +0,0 @@
----
-title: 怎么添加设置面板
-sidebar_position: 6
----

packages/artplayer-document/docs/zh-cn/Questions/var.js

@@ -1,65 +0,0 @@
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://artplayer.org/assets/sample/video.mp4',
-    muted: true,
-    autoSize: true,
-    autoplay: true,
-    ads: [
-        {
-            url: '/assets/sample/test1.mp4'
-        },
-        {
-            url: '/assets/sample/test2.webm'
-        },
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '跳过广告',
-            click: function () {
-                art.ads.end();
-            },
-        },
-    ],
-    layers: [
-        {
-            html: '跳过广告',
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-            click: function () {
-                art.ads.end();
-            },
-        },
-    ],
-});
-
-// 当每个视频广告播放时触发
-art.on('ads:start', function(item) {
-    console.info('广告开始播放: ' + item.url);
-});
-
-// 当全部视频广告播放完成
-art.on('ads:end', function() {
-    console.info('广告已经结束');
-});
-
-// 当前广告的下标
-console.info(art.ads.index);
-
-// 广告是否已经结束
-console.info(art.ads.isEnd);
-
-// 广告是否正在播放
-console.info(art.ads.playing);
-
-// 上一个广告的对象
-console.info(art.ads.prev);
-
-// 当前广告的对象
-console.info(art.ads.current);
-
-// 下一个广告的对象
-console.info(art.ads.next);