x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 10:56:15 -08:00
Code Issues Packages Projects Releases Wiki Activity
Files
9a68d13e1c4d08c80e2c29704460eefbc24da845
ArtPlayer/docs/document/assets/js/cc0122d1.2d84f82b.js
T
Harvey 9a68d13e1c typo: clean -> clear
2022-04-25 16:02:54 +08:00

1 line
41 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[96],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return s}});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var p=a.createContext({}),o=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=o(e.components);return a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,p=e.parentName,u=d(e,["components","mdxType","originalType","parentName"]),k=o(n),s=l,c=k["".concat(p,".").concat(s)]||k[s]||m[s]||r;return n?a.createElement(c,i(i({ref:t},u),{},{components:n})):a.createElement(c,i({ref:t},u))}));function s(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=k;var d={};for(var p in t)hasOwnProperty.call(t,p)&&(d[p]=t[p]);d.originalType=e,d.mdxType="string"==typeof e?e:l,i[1]=d;for(var o=2;o<r;o++)i[o]=n[o];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}k.displayName="MDXCreateElement"},831:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return d},contentTitle:function(){return p},metadata:function(){return o},toc:function(){return u},default:function(){return k}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],d={title:"\u9ad8\u7ea7\u5c5e\u6027",sidebar_position:4,slug:"/zh-cn/advance"},p=void 0,o={unversionedId:"zh-cn/Advance",id:"zh-cn/Advance",isDocsHomePage:!1,title:"\u9ad8\u7ea7\u5c5e\u6027",description:"\u8fd9\u9875\u9762\u662f\u5bf9\u5e38\u7528\u5c5e\u6027\u7684\u4e00\u4e9b\u989d\u5916\u8865\u5145\uff0c\u9700\u8981\u6df1\u5165\u5f00\u53d1\u81ea\u5b9a\u4e49\u529f\u80fd\u65f6\u624d\u9700\u8981\u9605\u8bfb",source:"@site/docs/zh-cn/Advance.md",sourceDirName:"zh-cn",slug:"/zh-cn/advance",permalink:"/document/zh-cn/advance",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"\u9ad8\u7ea7\u5c5e\u6027",sidebar_position:4,slug:"/zh-cn/advance"},sidebar:"zh-cn",previous:{title:"\u5e38\u7528\u5c5e\u6027",permalink:"/document/zh-cn/propertie"},next:{title:"\u9759\u6001\u5c5e\u6027",permalink:"/document/zh-cn/class"}},u=[{value:"id",id:"id",children:[],level:2},{value:"option",id:"option",children:[],level:2},{value:"isFocus",id:"isfocus",children:[],level:2},{value:"isDestroy",id:"isdestroy",children:[],level:2},{value:"whitelist",id:"whitelist",children:[],level:2},{value:"template",id:"template",children:[{value:"query",id:"query",children:[],level:3}],level:2},{value:"query",id:"query-1",children:[],level:2},{value:"events",id:"events",children:[],level:2},{value:"proxy",id:"proxy",children:[],level:2},{value:"storage",id:"storage",children:[],level:2},{value:"icons",id:"icons",children:[],level:2},{value:"i18n",id:"i18n",children:[{value:"get",id:"get",children:[],level:3},{value:"update",id:"update",children:[],level:3}],level:2},{value:"player",id:"player",children:[],level:2},{value:"subtitle",id:"subtitle",children:[{value:"show",id:"show",children:[],level:3},{value:"style",id:"style",children:[],level:3},{value:"url",id:"url",children:[],level:3},{value:"switch",id:"switch",children:[],level:3}],level:2},{value:"info",id:"info",children:[],level:2},{value:"layers",id:"layers",children:[{value:"show",id:"show-1",children:[],level:3},{value:"add",id:"add",children:[],level:3}],level:2},{value:"notice",id:"notice",children:[{value:"show",id:"show-2",children:[],level:3}],level:2},{value:"controls",id:"controls",children:[{value:"show",id:"show-3",children:[],level:3},{value:"add",id:"add-1",children:[],level:3}],level:2},{value:"contextmenu",id:"contextmenu",children:[{value:"show",id:"show-4",children:[],level:3},{value:"add",id:"add-2",children:[],level:3}],level:2},{value:"loading",id:"loading",children:[{value:"show",id:"show-5",children:[],level:3}],level:2},{value:"mask",id:"mask",children:[{value:"show",id:"show-6",children:[],level:3}],level:2},{value:"hotkey",id:"hotkey",children:[{value:"add",id:"add-3",children:[],level:3}],level:2},{value:"setting",id:"setting",children:[{value:"show",id:"show-7",children:[],level:3}],level:2},{value:"plugins",id:"plugins",children:[{value:"add",id:"add-4",children:[],level:3}],level:2}],m={toc:u};function k(e){var t=e.components,n=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,r.kt)("div",{parentName:"div",className:"admonition-heading"},(0,r.kt)("h5",{parentName:"div"},(0,r.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,r.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,r.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"\u63d0\u793a")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"\u8fd9\u9875\u9762\u662f\u5bf9\u5e38\u7528\u5c5e\u6027\u7684\u4e00\u4e9b\u989d\u5916\u8865\u5145\uff0c\u9700\u8981\u6df1\u5165\u5f00\u53d1\u81ea\u5b9a\u4e49\u529f\u80fd\u65f6\u624d\u9700\u8981\u9605\u8bfb"))),(0,r.kt)("h2",{id:"id"},"id"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Number"))),(0,r.kt)("p",null,"\u64ad\u653e\u5668\u5b9e\u4f8b\u7684\u4e00\u4e2a\u81ea\u589e\u7f16\u53f7"),(0,r.kt)("h2",{id:"option"},"option"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u64ad\u653e\u5668\u5b9e\u4f8b\u7ecf\u5408\u5e76\u540e\u7684\u53c2\u6570\u5bf9\u8c61"),(0,r.kt)("h2",{id:"isfocus"},"isFocus"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"\u64ad\u653e\u5668\u5b9e\u4f8b\u662f\u5426\u83b7\u5f97\u4e86\u7126\u70b9\uff0c\u5982\u6700\u540e\u88ab\u7528\u6237\u70b9\u51fb\u8fc7"),(0,r.kt)("h2",{id:"isdestroy"},"isDestroy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"\u64ad\u653e\u5668\u5b9e\u4f8b\u662f\u5426\u88ab\u9500\u6bc1"),(0,r.kt)("h2",{id:"whitelist"},"whitelist"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u767d\u540d\u5355\u7684\u5bf9\u8c61"),(0,r.kt)("h2",{id:"template"},"template"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u64ad\u653e\u5668 ",(0,r.kt)("inlineCode",{parentName:"p"},"Html")," \u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"query"},"query"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"query")," \u53ef\u4ee5\u67e5\u627e\u5f53\u524d\u64ad\u653e\u5668\u5b9e\u4f8b\u5185\u7684 dom \u5143\u7d20\uff0c\u7b49\u540c\u4e8e ",(0,r.kt)("inlineCode",{parentName:"p"},"document.querySelector('.artplayer-app').querySelector")),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n var $video = art.template.query('.art-video');\n console.info($video);\n});\n")),(0,r.kt)("h2",{id:"query-1"},"query"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u7b49\u4e8e ",(0,r.kt)("inlineCode",{parentName:"p"},"art.template.query")),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n var $video = art.query('.art-video');\n console.info($video);\n});\n")),(0,r.kt)("h2",{id:"events"},"events"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u4e8b\u4ef6\u53d1\u751f\u7684\u5bf9\u8c61"),(0,r.kt)("h2",{id:"proxy"},"proxy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u4ee3\u7406\u539f\u751f\u4e8b\u4ef6\u7684\u65b9\u6cd5\uff0c\u4fbf\u4e8e\u4e8b\u4ef6\u7684\u7ba1\u7406\u4e0e\u9500\u6bc1"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var container = document.querySelector('.artplayer-app');\nvar art = new Artplayer({\n container: container,\n url: '/assets/sample/video.mp4',\n});\n\nart.proxy(container, 'click', (event) => {\n console.info(event);\n});\n")),(0,r.kt)("h2",{id:"storage"},"storage"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u6301\u4e45\u5316\u5b58\u50a8\u7684\u5bf9\u8c61"),(0,r.kt)("p",null,"\u64ad\u653e\u5668\u4f1a\u81ea\u52a8\u6dfb\u52a0\u4e00\u4e2a\u540d\u4e3a ",(0,r.kt)("inlineCode",{parentName:"p"},"artplayer_settings")," \u7684 JSON \u5bf9\u8c61\u5230\u7684 ",(0,r.kt)("inlineCode",{parentName:"p"},"localStorage")," \u91cc"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,r.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,r.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"get")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u83b7\u53d6\u503c")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"set")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u8bbe\u7f6e\u503c")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"del")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u5220\u9664\u503c")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"clear")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u6e05\u7a7a\u5bf9\u8c61")))),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.storage.set('your-key', 'your-value');\nart.storage.get('your-key');\nart.storage.del('your-key');\nart.storage.clear();\n")),(0,r.kt)("h2",{id:"icons"},"icons"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u56fe\u6807\u7684\u5bf9\u8c61"),(0,r.kt)("h2",{id:"i18n"},"i18n"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u591a\u8bed\u8a00\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"get"},"get"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," \u53ef\u4ee5\u83b7\u53d6\u5230\u5bf9\u5e94\u7684\u8bed\u8a00\u7684\u503c"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.i18n.get('Play'));\n});\n")),(0,r.kt)("h3",{id:"update"},"update"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"update")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u66f4\u591a\u8bed\u8a00"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n lang: 'jp',\n});\n\nart.i18n.update({\n 'zh-cn': {\n Language: '\u7b80\u4f53',\n },\n 'zh-tw': {\n Language: '\u7e41\u9ad4',\n },\n en: {\n Language: 'English',\n },\n jp: {\n Language: '\u65e5\u6587',\n },\n fr: {\n Language: 'Fran\xe7ais',\n },\n ru: {\n Language: 'Russe',\n },\n});\n")),(0,r.kt)("h2",{id:"player"},"player"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u6838\u5fc3\u529f\u80fd\u7684\u5bf9\u8c61\uff0c\u6240\u4ee5\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u4ee3\u7406\u5230\u64ad\u653e\u5668\u5b9e\u4f8b\u4e0a\u4e86"),(0,r.kt)("h2",{id:"subtitle"},"subtitle"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u5b57\u5e55\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u5b57\u5e55\u663e\u793a"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n});\n\nart.on('ready', () => {\n art.seek = 20;\n art.subtitle.show = false;\n setTimeout(() => {\n art.subtitle.show = true;\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"style"},"style"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"style")," \u53ef\u4ee5\u52a8\u6001\u4fee\u6539\u5b57\u5e55\u6837\u5f0f"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n encoding: 'utf-8',\n style: {\n color: '#03A9F4',\n 'font-size': '30px',\n },\n },\n});\n\nart.on('ready', () => {\n art.seek = 20;\n setTimeout(() => {\n art.subtitle.style({\n color: 'red',\n 'font-size': '40px',\n });\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"url"},"url"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 url \u53ef\u4ee5\u8bbe\u7f6e\u548c\u83b7\u53d6\u5b57\u5e55\u7f51\u5740"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n encoding: 'utf-8',\n style: {\n color: '#03A9F4',\n 'font-size': '30px',\n },\n },\n});\n\nart.on('ready', () => {\n console.info(art.subtitle.url);\n setTimeout(() => {\n art.subtitle.url = '/assets/sample/subtitle.srt?t=1';\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"switch"},"switch"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"switch")," \u5c31\u50cf\u5c5e\u6027\u8bbe\u7f6e ",(0,r.kt)("inlineCode",{parentName:"p"},"url"),"\uff0c\u4f46\u53ef\u4ee5\u4fee\u6539\u5b57\u5e55\u9009\u9879"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n encoding: 'utf-8',\n style: {\n color: 'red',\n 'font-size': '30px',\n },\n },\n});\n\nart.on('ready', () => {\n art.seek = 20;\n setTimeout(() => {\n art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {\n name: 'The new subtitle',\n style: {\n color: 'green',\n 'font-size': '24px',\n },\n });\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"info"},"info"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u7edf\u8ba1\u4fe1\u606f\u7684\u5bf9\u8c61"),(0,r.kt)("h2",{id:"layers"},"layers"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u4e1a\u52a1\u5c42\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-1"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u5168\u90e8\u56fe\u5c42\u662f\u5426\u663e\u793a"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var img = '/assets/sample/layer.png';\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n layers: [\n {\n html: `<img style=\"width: 100px\" src=\"${img}\">`,\n style: {\n position: 'absolute',\n top: '20px',\n right: '20px',\n opacity: '.9',\n },\n },\n {\n html: `<img style=\"width: 100px\" src=\"${img}\">`,\n style: {\n position: 'absolute',\n top: '20px',\n left: '20px',\n opacity: '.9',\n },\n },\n ],\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n art.layers.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"add"},"add"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u4e1a\u52a1\u5c42"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,r.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,r.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"disable")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Boolean")),(0,r.kt)("td",{parentName:"tr",align:null},"\u662f\u5426\u7981\u7528\u7ec4\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"name")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u552f\u4e00\u540d\u79f0\uff0c\u7528\u4e8e\u6807\u8bb0\u7c7b\u540d")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"index")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Number")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7d22\u5f15\uff0c\u7528\u4e8e\u663e\u793a\u7684\u4f18\u5148\u7ea7")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"html")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,r.kt)("inlineCode",{parentName:"td"},"Element")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684 DOM \u5143\u7d20")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"style")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Object")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6837\u5f0f\u5bf9\u8c61")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"click")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u70b9\u51fb\u4e8b\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"mounted")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6302\u8f7d\u540e\u89e6\u53d1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684\u63d0\u793a\u6587\u672c")))),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nvar img = '/assets/sample/layer.png';\nart.on('ready', () => {\n setTimeout(() => {\n art.layers.add({\n html: `<img style=\"width: 100px\" src=\"${img}\">`,\n style: {\n position: 'absolute',\n top: '20px',\n right: '20px',\n opacity: '.9',\n },\n });\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"notice"},"notice"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u63d0\u793a\u4fe1\u606f\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-2"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u8f93\u51fa\u81ea\u5b9a\u4e49\u63d0\u793a\u4fe1\u606f\uff0c\u9ed8\u8ba4\u505c\u7559\u65f6\u95f4\u4e3a\u4e24\u79d2\uff0c\u4e14\u65b0\u7684\u4fe1\u606f\u4f1a\u9a6c\u4e0a\u8986\u76d6\u65e7\u7684\u4fe1\u606f"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.notice.show = '\u81ea\u5b9a\u4e49\u63d0\u793a\u4fe1\u606f1';\n art.notice.show = '\u81ea\u5b9a\u4e49\u63d0\u793a\u4fe1\u606f2';\n});\n")),(0,r.kt)("h2",{id:"controls"},"controls"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u63a7\u5236\u680f\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-3"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u63a7\u5236\u680f\u662f\u5426\u663e\u793a"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n art.controls.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"add-1"},"add"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u63a7\u5236\u5668"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,r.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,r.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"disable")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Boolean")),(0,r.kt)("td",{parentName:"tr",align:null},"\u662f\u5426\u7981\u7528\u7ec4\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"name")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u552f\u4e00\u540d\u79f0\uff0c\u7528\u4e8e\u6807\u8bb0\u7c7b\u540d")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"index")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Number")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7d22\u5f15\uff0c\u7528\u4e8e\u663e\u793a\u7684\u4f18\u5148\u7ea7")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"html")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,r.kt)("inlineCode",{parentName:"td"},"Element")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684 DOM \u5143\u7d20")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"style")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Object")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6837\u5f0f\u5bf9\u8c61")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"click")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u70b9\u51fb\u4e8b\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"mounted")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6302\u8f7d\u540e\u89e6\u53d1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684\u63d0\u793a\u6587\u672c")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"position")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u4f4d\u7f6e\u5728 ",(0,r.kt)("inlineCode",{parentName:"td"},"left")," \u6216\u8005 ",(0,r.kt)("inlineCode",{parentName:"td"},"right"))))),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n art.controls.add({\n position: 'right',\n index: 10,\n html: '\u81ea\u5b9a\u4e49\u6309\u94ae',\n tooltip: '\u81ea\u5b9a\u4e49\u6309\u94ae\u7684\u63d0\u793a',\n click: function () {\n console.log('\u4f60\u70b9\u51fb\u4e86\u81ea\u5b9a\u4e49\u6309\u94ae');\n },\n });\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"contextmenu"},"contextmenu"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u53f3\u952e\u83dc\u5355\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-4"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u83dc\u5355\u662f\u5426\u663e\u793a"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.contextmenu.show = true;\n setTimeout(() => {\n art.contextmenu.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h3",{id:"add-2"},"add"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u83dc\u5355\u9879"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,r.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,r.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"disable")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Boolean")),(0,r.kt)("td",{parentName:"tr",align:null},"\u662f\u5426\u7981\u7528\u7ec4\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"name")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u552f\u4e00\u540d\u79f0\uff0c\u7528\u4e8e\u6807\u8bb0\u7c7b\u540d")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"index")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Number")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7d22\u5f15\uff0c\u7528\u4e8e\u663e\u793a\u7684\u4f18\u5148\u7ea7")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"html")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,r.kt)("inlineCode",{parentName:"td"},"Element")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684 DOM \u5143\u7d20")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"style")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Object")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6837\u5f0f\u5bf9\u8c61")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"click")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u70b9\u51fb\u4e8b\u4ef6")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"mounted")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u6302\u8f7d\u540e\u89e6\u53d1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"tooltip")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"String")),(0,r.kt)("td",{parentName:"tr",align:null},"\u7ec4\u4ef6\u7684\u63d0\u793a\u6587\u672c")))),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.contextmenu.show = true;\n setTimeout(() => {\n art.contextmenu.add({\n html: '\u81ea\u5b9a\u4e49\u83dc\u5355',\n click: function () {\n console.info('\u4f60\u70b9\u51fb\u4e86\u81ea\u5b9a\u4e49\u83dc\u5355');\n art.contextmenu.show = false;\n },\n });\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"loading"},"loading"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u52a0\u8f7d\u4e2d\u7684\u56fe\u6807"),(0,r.kt)("h3",{id:"show-5"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u662f\u5426\u663e\u793a\u52a0\u8f7d\u4e2d\u7684\u56fe\u6807"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.loading.show = true;\n setTimeout(() => {\n art.loading.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"mask"},"mask"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u906e\u7f69\u5c42\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-6"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u906e\u7f69\u5c42\u662f\u5426\u52a0\u8f7d\u5c42"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.mask.show = true;\n setTimeout(() => {\n art.mask.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"hotkey"},"hotkey"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u5feb\u6377\u952e\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"add-3"},"add"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u5feb\u6377\u952e\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f ",(0,r.kt)("inlineCode",{parentName:"p"},"key code")," \u6570\u5b57\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u56de\u8c03\u51fd\u6570"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.hotkey.add(65, () => {\n console.info('\u4f60\u70b9\u51fb\u4e86 A \u952e');\n });\n\n art.hotkey.add(66, () => {\n console.info('\u4f60\u70b9\u51fb\u4e86 B \u952e');\n });\n});\n")),(0,r.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,r.kt)("div",{parentName:"div",className:"admonition-heading"},(0,r.kt)("h5",{parentName:"div"},(0,r.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,r.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,r.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"\u63d0\u793a")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"\u53ea\u5728\u64ad\u653e\u5668\u83b7\u5f97\u7126\u70b9\u540e\uff08\u5982\u70b9\u51fb\u4e86\u64ad\u653e\u5668\u540e\uff09\uff0c\u8be5\u5feb\u6377\u952e\u624d\u4f1a\u751f\u6548"))),(0,r.kt)("h2",{id:"setting"},"setting"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u8bbe\u7f6e\u9762\u677f\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"show-7"},"show"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Getter/Setter"))),(0,r.kt)("p",null,"\u5c5e\u6027 ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," \u53ef\u4ee5\u63a7\u5236\u8bbe\u7f6e\u9762\u677f\u662f\u5426\u663e\u793a"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.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 autoSize: true,\n});\n\nart.on('ready', () => {\n art.seek = 20;\n art.setting.show = true;\n setTimeout(() => {\n art.setting.show = false;\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"plugins"},"plugins"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"\u7ba1\u7406\u63d2\u4ef6\u7684\u5bf9\u8c61"),(0,r.kt)("h3",{id:"add-4"},"add"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u65b9\u6cd5 ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," \u53ef\u4ee5\u52a8\u6001\u6dfb\u52a0\u63d2\u4ef6"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"function myPlugin(art) {\n console.info('\u4f60\u53ef\u4ee5\u5728\u63d2\u4ef6\u91cc\u8bbf\u95ee\u5230\u64ad\u653e\u5668\u7684\u5b9e\u4f8b');\n return {\n name: 'myPlugin',\n something: '\u81ea\u5b9a\u4e49\u5bfc\u51fa\u7684\u5c5e\u6027',\n doSomething: function () {\n console.info('\u81ea\u5b9a\u4e49\u5bfc\u51fa\u7684\u65b9\u6cd5');\n },\n };\n}\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.plugins.add(myPlugin);\n console.info(art.plugins.myPlugin.something);\n console.info(art.plugins.myPlugin.doSomething());\n});\n")))}k.isMDXComponent=!0}}]);
Reference in new issue View Git Blame Copy Permalink