ArtPlayer/docs/document/assets/js/58e1c627.0fa16c0d.js

"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[28],{3905:function(n,e,t){t.d(e,{Zo:function(){return m},kt:function(){return f}});var r=t(7294);function l(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function a(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,r)}return t}function s(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){l(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function i(n,e){if(null==n)return{};var t,r,l=function(n,e){if(null==n)return{};var t,r,l={},a=Object.keys(n);for(r=0;r<a.length;r++)t=a[r],e.indexOf(t)>=0||(l[t]=n[t]);return l}(n,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(r=0;r<a.length;r++)t=a[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(l[t]=n[t])}return l}var o=r.createContext({}),c=function(n){var e=r.useContext(o),t=e;return n&&(t="function"==typeof n?n(e):s(s({},e),n)),t},m=function(n){var e=c(n.components);return r.createElement(o.Provider,{value:e},n.children)},u={inlineCode:"code",wrapper:function(n){var e=n.children;return r.createElement(r.Fragment,{},e)}},p=r.forwardRef((function(n,e){var t=n.components,l=n.mdxType,a=n.originalType,o=n.parentName,m=i(n,["components","mdxType","originalType","parentName"]),p=c(t),f=l,h=p["".concat(o,".").concat(f)]||p[f]||u[f]||a;return t?r.createElement(h,s(s({ref:e},m),{},{components:t})):r.createElement(h,s({ref:e},m))}));function f(n,e){var t=arguments,l=e&&e.mdxType;if("string"==typeof n||l){var a=t.length,s=new Array(a);s[0]=p;var i={};for(var o in e)hasOwnProperty.call(e,o)&&(i[o]=e[o]);i.originalType=n,i.mdxType="string"==typeof n?n:l,s[1]=i;for(var c=2;c<a;c++)s[c]=t[c];return r.createElement.apply(null,s)}return r.createElement.apply(null,t)}p.displayName="MDXCreateElement"},9450:function(n,e,t){t.r(e),t.d(e,{assets:function(){return m},contentTitle:function(){return o},default:function(){return f},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return u}});var r=t(7462),l=t(3366),a=(t(7294),t(3905)),s=["components"],i={title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",sidebar_position:1},o=void 0,c={unversionedId:"zh-cn/Questions/Create_selector_in_the_controls",id:"zh-cn/Questions/Create_selector_in_the_controls",title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",description:"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u6dfb\u52a0\u63a7\u4ef6\u7684\u65f6\u5019\u4f7f\u7528 selector \u548c onSelect \u5c5e\u6027",source:"@site/docs/zh-cn/Questions/Create_selector_in_the_controls.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/Create_selector_in_the_controls",permalink:"/document/zh-cn/Questions/Create_selector_in_the_controls",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",sidebar_position:1},sidebar:"zh-cn",previous:{title:"Iframe \u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/iframe"},next:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",permalink:"/document/zh-cn/Questions/Create_button_in_the_controls"}},m={},u=[{value:"\u5207\u6362\u5b57\u5e55",id:"\u5207\u6362\u5b57\u5e55",level:3},{value:"\u5207\u6362\u6ee4\u955c",id:"\u5207\u6362\u6ee4\u955c",level:3}],p={toc:u};function f(n){var e=n.components,t=(0,l.Z)(n,s);return(0,a.kt)("wrapper",(0,r.Z)({},p,t,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u6dfb\u52a0\u63a7\u4ef6\u7684\u65f6\u5019\u4f7f\u7528 ",(0,a.kt)("inlineCode",{parentName:"p"},"selector")," \u548c ",(0,a.kt)("inlineCode",{parentName:"p"},"onSelect")," \u5c5e\u6027"),(0,a.kt)("h3",{id:"\u5207\u6362\u5b57\u5e55"},"\u5207\u6362\u5b57\u5e55"),(0,a.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    controls: [\n        {\n            position: 'right',\n            html: '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\n                art.subtitle.url = item.url;\n                \n                return '\u4f60\u70b9\u51fb\u4e86 ' + item.html;\n            },\n        },\n    ],\n});\n")),(0,a.kt)("h3",{id:"\u5207\u6362\u6ee4\u955c"},"\u5207\u6362\u6ee4\u955c"),(0,a.kt)("div",{className:"run-code","data-libs":"https://cdn.jsdelivr.net/npm/instagram.css@0.1.4/dist/instagram.min.css"},"\u25b6 Run Code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'var instagramFilters = [\n    {\n        "html": "1977",\n        "class": "filter-1977"\n    },\n    {\n        "html": "Aden",\n        "class": "filter-aden"\n    },\n    {\n        "html": "Amaro",\n        "class": "filter-amaro"\n    },\n    {\n        "html": "Ashby",\n        "class": "filter-ashby"\n    },\n    {\n        "html": "Brannan",\n        "class": "filter-brannan"\n    },\n    {\n        "html": "Brooklyn",\n        "class": "filter-brooklyn"\n    },\n    {\n        "html": "Charmes",\n        "class": "filter-charmes"\n    },\n    {\n        "html": "Clarendon",\n        "class": "filter-clarendon"\n    },\n    {\n        "html": "Crema",\n        "class": "filter-crema"\n    },\n    {\n        "html": "Dogpatch",\n        "class": "filter-dogpatch"\n    },\n    {\n        "html": "Earlybird",\n        "class": "filter-earlybird"\n    },\n    {\n        "html": "Gingham",\n        "class": "filter-gingham"\n    },\n    {\n        "html": "Ginza",\n        "class": "filter-ginza"\n    },\n    {\n        "html": "Hefe",\n        "class": "filter-hefe"\n    },\n    {\n        "html": "Helena",\n        "class": "filter-helena"\n    },\n    {\n        "html": "Hudson",\n        "class": "filter-hudson"\n    },\n    {\n        "html": "Inkwell",\n        "class": "filter-inkwell"\n    },\n    {\n        "html": "Kelvin",\n        "class": "filter-kelvin"\n    },\n    {\n        "html": "Kuno",\n        "class": "filter-juno"\n    },\n    {\n        "html": "Lark",\n        "class": "filter-lark"\n    },\n    {\n        "html": "Lo-Fi",\n        "class": "filter-lofi"\n    },\n    {\n        "html": "Ludwig",\n        "class": "filter-ludwig"\n    },\n    {\n        "html": "Maven",\n        "class": "filter-maven"\n    },\n    {\n        "html": "Mayfair",\n        "class": "filter-mayfair"\n    },\n    {\n        "html": "Moon",\n        "class": "filter-moon"\n    },\n    {\n        "html": "Nashville",\n        "class": "filter-nashville"\n    },\n    {\n        "html": "Perpetua",\n        "class": "filter-perpetua"\n    },\n    {\n        "html": "Poprocket",\n        "class": "filter-poprocket"\n    },\n    {\n        "html": "Reyes",\n        "class": "filter-reyes"\n    },\n    {\n        "html": "Rise",\n        "class": "filter-rise"\n    },\n    {\n        "html": "Sierra",\n        "class": "filter-sierra"\n    },\n    {\n        "html": "Skyline",\n        "class": "filter-skyline"\n    },\n    {\n        "html": "Slumber",\n        "class": "filter-slumber"\n    },\n    {\n        "html": "Stinson",\n        "class": "filter-stinson"\n    },\n    {\n        "html": "Sutro",\n        "class": "filter-sutro"\n    },\n    {\n        "html": "Toaster",\n        "class": "filter-toaster"\n    },\n    {\n        "html": "Valencia",\n        "class": "filter-valencia"\n    },\n    {\n        "html": "Vesper",\n        "class": "filter-vesper"\n    },\n    {\n        "html": "Walden",\n        "class": "filter-walden"\n    },\n    {\n        "html": "Willow",\n        "class": "filter-willow"\n    },\n    {\n        "html": "X-Pro",\n        "class": "filter-xpro-ii"\n    }\n]\n\nvar art = new Artplayer({\n    container: \'.artplayer-app\',\n    url: \'https://artplayer.org/assets/sample/video.mp4\',\n    autoSize: true,\n    controls: [\n        {\n            position: \'right\',\n            html: \'Instagram Filters\',\n            selector: instagramFilters,\n            onSelect: function (item) {\n                art.template.$video.className = \'art-video \' + item.class;\n                return item.html;\n            },\n        },\n    ],\n});\n')))}f.isMDXComponent=!0}}]);