x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-10 12:46:15 -08:00
Code Issues Packages Projects Releases Wiki Activity
Files
d4c67a8a7da78102e868dfd5509a5eb50cdcfbda
ArtPlayer/docs/document/assets/js/de0fc17a.0460cd4c.js
T
Harvey 3bf4db8529 update docs
2022-02-14 10:09:58 +08:00

1 line
8.6 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[246],{3905:function(t,e,n){n.d(e,{Zo:function(){return d},kt:function(){return c}});var r=n(7294);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 o(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 i(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({}),s=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},d=function(t){var e=s(t.components);return r.createElement(p.Provider,{value:e},t.children)},u={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},m=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,d=i(t,["components","mdxType","originalType","parentName"]),m=s(n),c=a,f=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?r.createElement(f,o(o({ref:e},d),{},{components:n})):r.createElement(f,o({ref:e},d))}));function c(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=t,i.mdxType="string"==typeof t?t:a,o[1]=i;for(var s=2;s<l;s++)o[s]=n[s];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},3115:function(t,e,n){n.r(e),n.d(e,{frontMatter:function(){return i},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),o=["components"],i={title:"How to add setting panel",sidebar_position:6},p=void 0,s={unversionedId:"en/Questions/How to add setting panel",id:"en/Questions/How to add setting panel",isDocsHomePage:!1,title:"How to add setting panel",description:"Settings panels are similar to a collection of list selections, and support multi-layer nested",source:"@site/docs/en/Questions/How to add setting panel.md",sourceDirName:"en/Questions",slug:"/en/Questions/How to add setting panel",permalink:"/document/en/Questions/How to add setting panel",tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to add video ads",permalink:"/document/en/Questions/How to add video ads"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use with react portal"}},d=[],u={toc:d};function m(t){var e=t.components,n=(0,a.Z)(t,o);return(0,l.kt)("wrapper",(0,r.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(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},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"DOM elements of selector")),(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},"Icon of selector")),(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},"Selector list")),(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},"Selector click event")),(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},"Panel width")),(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},"Default selected")),(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},"Tooltip text")))),(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: 'Select Subtitle',\n width: 250,\n tooltip: 'Subtitle 01',\n selector: [\n {\n default: true,\n html: '<span style=\"color:red\">Subtitle 01</span>',\n url: '/assets/sample/subtitle.srt?id=1',\n },\n {\n html: '<span style=\"color:yellow\">Subtitle 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 // Change the tooltip\n return item.html;\n },\n },\n {\n html: 'Select Quality',\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 // Change the tooltip\n return item.html;\n },\n },\n {\n html: 'Multi-layer nested',\n selector: [\n {\n html: 'Nested 01',\n selector: [\n {\n html: 'Nested 02',\n },\n {\n html: 'Nested 02',\n },\n ],\n },\n {\n html: 'Nested 01',\n selector: [\n {\n html: 'Nested 02',\n },\n {\n html: 'Nested 02',\n },\n ],\n },\n ],\n },\n ],\n});\n")))}m.isMDXComponent=!0}}]);
Reference in new issue View Git Blame Copy Permalink