"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[740],{3905:function(t,n,e){e.d(n,{Zo:function(){return d},kt:function(){return c}});var a=e(7294);function r(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function l(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,a)}return e}function i(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?l(Object(e),!0).forEach((function(n){r(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function o(t,n){if(null==t)return{};var e,a,r=function(t,n){if(null==t)return{};var e,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||(r[e]=t[e]);return r}(t,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var m=a.createContext({}),p=function(t){var n=a.useContext(m),e=n;return t&&(e="function"==typeof t?t(n):i(i({},n),t)),e},d=function(t){var n=p(t.components);return a.createElement(m.Provider,{value:n},t.children)},u={inlineCode:"code",wrapper:function(t){var n=t.children;return a.createElement(a.Fragment,{},n)}},s=a.forwardRef((function(t,n){var e=t.components,r=t.mdxType,l=t.originalType,m=t.parentName,d=o(t,["components","mdxType","originalType","parentName"]),s=p(e),c=r,k=s["".concat(m,".").concat(c)]||s[c]||u[c]||l;return e?a.createElement(k,i(i({ref:n},d),{},{components:e})):a.createElement(k,i({ref:n},d))}));function c(t,n){var e=arguments,r=n&&n.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=s;var o={};for(var m in n)hasOwnProperty.call(n,m)&&(o[m]=n[m]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=e[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,e)}s.displayName="MDXCreateElement"},4043:function(t,n,e){e.r(n),e.d(n,{assets:function(){return d},contentTitle:function(){return m},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var a=e(7462),r=e(3366),l=(e(7294),e(3905)),i=["components"],o={title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},m=void 0,p={unversionedId:"zh-cn/Questions/How_to_add_setting_panel",id:"zh-cn/Questions/How_to_add_setting_panel",title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",description:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",source:"@site/docs/zh-cn/Questions/How_to_add_setting_panel.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How_to_add_setting_panel",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},sidebar:"zh-cn",previous:{title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",permalink:"/document/zh-cn/Questions/How_to_import_types"},next:{title:"\u4e0e React Portal \u4f7f\u7528",permalink:"/document/zh-cn/Questions/Use_with_react_portal"}},d={},u=[{value:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",level:2},{value:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",id:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",level:2},{value:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",id:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",level:2}],s={toc:u};function c(t){var n=t.components,e=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},s,e,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"},"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"),(0,l.kt)("p",null,"\u8bbe\u7f6e\u9762\u677f\u7c7b\u4f3c\u4e8e\u5217\u8868\u9009\u62e9\u7684\u96c6\u5408\uff0c\u800c\u4e14\u652f\u6301\u591a\u5c42\u5d4c\u5957"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684\u56fe\u6807")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u5217\u8868")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"onSelect")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Function")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u70b9\u51fb\u4e8b\u4ef6")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"width")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Number")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5217\u8868\u5bbd\u5ea6")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"default")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Boolean")),(0,l.kt)("td",{parentName:"tr",align:null},"\u662f\u5426\u9ed8\u8ba4\u9009\u4e2d")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String")),(0,l.kt)("td",{parentName:"tr",align:null},"\u63d0\u793a\u6587\u672c")))),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    setting: true,\n    flip: true,\n    playbackRate: true,\n    aspectRatio: true,\n    settings: [\n        {\n            html: '\u9009\u62e9\u5b57\u5e55',\n            width: 250,\n            tooltip: '\u5b57\u5e55 01',\n            selector: [\n                {\n                    default: true,\n                    html: '<span style=\"color:red\">\u5b57\u5e55 01</span>',\n                    url: '/assets/sample/subtitle.srt?id=1',\n                },\n                {\n                    html: '<span style=\"color:yellow\">\u5b57\u5e55 02</span>',\n                    url: '/assets/sample/subtitle.srt?id=2',\n                },\n            ],\n            onSelect: function (item, $dom, event) {\n                console.info(item, $dom, event);\n                art.subtitle.url = item.url;\n\n                // \u6539\u53d8\u63d0\u793a\u6587\u672c\n                return item.html;\n            },\n        },\n        {\n            html: '\u9009\u62e9\u753b\u8d28',\n            width: 150,\n            tooltip: '1080P',\n            selector: [\n                {\n                    default: true,\n                    html: '1080P',\n                    url: '/assets/sample/video.mp4?id=1080',\n                },\n                {\n                    html: '720P',\n                    url: '/assets/sample/video.mp4?id=720',\n                },\n                {\n                    html: '360P',\n                    url: '/assets/sample/video.mp4?id=360',\n                },\n            ],\n            onSelect: function (item, $dom, event) {\n                console.info(item, $dom, event);\n                art.switchQuality(item.url, item.html);\n\n                // \u6539\u53d8\u63d0\u793a\u6587\u672c\n                return item.html;\n            },\n        },\n        {\n            html: '\u591a\u5c42\u5d4c\u5957',\n            selector: [\n                {\n                    html: '\u5d4c\u595701',\n                    selector: [\n                        {\n                            html: '\u5d4c\u595702',\n                        },\n                        {\n                            html: '\u5d4c\u595702',\n                        },\n                    ],\n                },\n                {\n                    html: '\u5d4c\u595701',\n                    selector: [\n                        {\n                            html: '\u5d4c\u595702',\n                        },\n                        {\n                            html: '\u5d4c\u595702',\n                        },\n                    ],\n                },\n            ],\n        },\n    ],\n});\n")),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae"},"\u6dfb\u52a0\u5207\u6362\u6309\u94ae"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684\u56fe\u6807")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"switch")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Boolean")),(0,l.kt)("td",{parentName:"tr",align:null},"\u6309\u94ae\u9ed8\u8ba4\u72b6\u6001")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"onSwitch")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Function")),(0,l.kt)("td",{parentName:"tr",align:null},"\u6309\u94ae\u5207\u6362\u4e8b\u4ef6")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String")),(0,l.kt)("td",{parentName:"tr",align:null},"\u63d0\u793a\u6587\u672c")))),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    setting: true,\n    flip: true,\n    playbackRate: true,\n    aspectRatio: true,\n    settings: [\n        {\n            html: '\u753b\u4e2d\u753b\u6a21\u5f0f',\n            tooltip: '\u5173\u95ed',\n            icon: '<img width=\"22\" heigth=\"22\" src=\"/assets/img/state.svg\">',\n            switch: false,\n            onSwitch: function (item, $dom, event) {\n                console.info(item, $dom, event);\n                const nextState = !item.switch;\n                art.pip = nextState;\n\n                // \u6539\u53d8\u63d0\u793a\u6587\u672c\n                item.tooltip = nextState ? '\u5f00\u542f' : '\u5173\u95ed';\n\n                // \u6539\u53d8\u6309\u94ae\u72b6\u6001\n                return nextState;\n            },\n        },\n        {\n            html: '\u548c\u5217\u8868\u7ec4\u5408',\n            width: 200,\n            selector: [\n                {\n                    default: true,\n                    html: '\u8bbe\u7f6e 01',\n                },\n                {\n                    html: '\u8bbe\u7f6e 02',\n                },\n                {\n                    html: '\u8bbe\u7f6e 03',\n                    switch: false,\n                    onSwitch: function (item, $dom, event) {\n                        return !item.switch;\n                    },\n                },\n                {\n                    html: '\u8bbe\u7f6e 04',\n                    icon: '',\n                    switch: true,\n                    onSwitch: function (item, $dom, event) {\n                        return !item.switch;\n                    },\n                },\n            ],\n            onSelect: function (item) {\n                return item.html;\n            },\n        },\n    ],\n});\n")),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8"},"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684\u56fe\u6807")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"range")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,l.kt)("td",{parentName:"tr",align:null},"\u9ed8\u8ba4\u72b6\u6001\u6570\u7ec4")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"onRange")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Function")),(0,l.kt)("td",{parentName:"tr",align:null},"\u6ed1\u5757\u6ed1\u52a8\u4e8b\u4ef6")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String")),(0,l.kt)("td",{parentName:"tr",align:null},"\u63d0\u793a\u6587\u672c")))),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"const range = [5, 1, 10, 1];\nconst value = range[0];\nconst min = range[1];\nconst max = range[2];\nconst step = range[3];\n")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    setting: true,\n    flip: true,\n    playbackRate: true,\n    aspectRatio: true,\n    settings: [\n        {\n            html: '\u6ed1\u5757',\n            tooltip: '5x',\n            icon: '<img width=\"22\" heigth=\"22\" src=\"/assets/img/state.svg\">',\n            range: [5, 1, 10, 1],\n            onRange: function (item) {\n                // \u6539\u53d8\u63d0\u793a\u6587\u672c\n                return item.range + 'x';\n            },\n        },\n        {\n            html: '\u548c\u5217\u8868\u7ec4\u5408',\n            width: 200,\n            selector: [\n                {\n                    default: true,\n                    html: '\u8bbe\u7f6e 01',\n                },\n                {\n                    html: '\u8bbe\u7f6e 02',\n                },\n                {\n                    html: '\u8bbe\u7f6e 03',\n                    tooltip: '5x',\n                    range: [5, 1, 10, 1],\n                    onRange: function (item) {\n                        return item.range + 'x';\n                    },\n                },\n                {\n                    html: '\u8bbe\u7f6e 04',\n                    icon: '',\n                    tooltip: '5x',\n                    range: [5, 1, 10, 1],\n                    onRange: function (item) {\n                        return item.range + 'x';\n                    },\n                },\n            ],\n            onSelect: function (item) {\n                return item.html;\n            },\n        },\n    ],\n});\n")))}c.isMDXComponent=!0}}]);