"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[868],{9278:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var r=n(9301);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){a(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,r,a=function(t,e){if(null==t)return{};var n,r,a={},l=Object.keys(t);for(r=0;r<l.length;r++)n=l[r],e.indexOf(n)>=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r<l.length;r++)n=l[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var p=r.createContext({}),u=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=u(t.components);return r.createElement(p.Provider,{value:e},t.children)},d={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},s=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),s=u(n),c=a,k=s["".concat(p,".").concat(c)]||s[c]||d[c]||l;return n?r.createElement(k,i(i({ref:e},m),{},{components:n})):r.createElement(k,i({ref:e},m))}));function c(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,i=new Array(l);i[0]=s;var o={};for(var p in e)hasOwnProperty.call(e,p)&&(o[p]=e[p]);o.originalType=t,o.mdxType="string"==typeof t?t:a,i[1]=o;for(var u=2;u<l;u++)i[u]=n[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}s.displayName="MDXCreateElement"},4299:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return p},default:function(){return c},frontMatter:function(){return o},metadata:function(){return u},toc:function(){return d}});var r=n(7145),a=n(4736),l=(n(9301),n(9278)),i=["components"],o={title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},p=void 0,u={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:"\u8bbe\u7f6e\u9762\u677f\u7c7b\u4f3c\u4e8e\u5217\u8868\u9009\u62e9\u7684\u96c6\u5408\uff0c\u800c\u4e14\u652f\u6301\u591a\u5c42\u5d4c\u5957",source:"@site/docs/zh-cn/Questions/How to add setting panel.md",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How to add setting panel",permalink:"/document/zh-cn/Questions/How to add setting panel",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\u6dfb\u52a0\u89c6\u9891\u5e7f\u544a",permalink:"/document/zh-cn/Questions/How to add video ads"},next:{title:"\u4e0e React Portal \u4f7f\u7528",permalink:"/document/zh-cn/Questions/Use with react portal"}},m={},d=[],s={toc:d};function c(t){var e=t.components,n=(0,a.Z)(t,i);return(0,l.kt)("wrapper",(0,r.Z)({},s,n,{components:e,mdxType:"MDXLayout"}),(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) {\n                console.info(item, $dom);\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) {\n                console.info(item, $dom);\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")))}c.isMDXComponent=!0}}]);