x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-10 21:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity
Files
83a35c8b6d4104f3eec6d76217678bcecf4bf867
ArtPlayer/docs/document/assets/js/246dbf43.dd96cd1b.js
T
zhw2590582 d2facc5a76 update docs
2021-11-28 19:33:58 +08:00

1 line
37 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[270],{3905:function(e,t,n){n.d(t,{Zo:function(){return m},kt:function(){return k}});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 o(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({}),d=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=d(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},s=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,p=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),s=d(n),k=l,c=s["".concat(p,".").concat(k)]||s[k]||u[k]||r;return n?a.createElement(c,i(i({ref:t},m),{},{components:n})):a.createElement(c,i({ref:t},m))}));function k(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=s;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var d=2;d<r;d++)i[d]=n[d];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}s.displayName="MDXCreateElement"},1940:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return d},toc:function(){return m},default:function(){return s}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],o={title:"Advanced propertys",sidebar_position:4,slug:"/advance"},p=void 0,d={unversionedId:"en/Advance",id:"en/Advance",isDocsHomePage:!1,title:"Advanced propertys",description:"This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions.",source:"@site/docs/en/Advance.md",sourceDirName:"en",slug:"/advance",permalink:"/document/advance",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Advanced propertys",sidebar_position:4,slug:"/advance"},sidebar:"en",previous:{title:"Common properties",permalink:"/document/propertie"},next:{title:"Static propertys",permalink:"/document/class"}},m=[{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:"userAgent",id:"useragent",children:[],level:2},{value:"isMobile",id:"ismobile",children:[],level:2},{value:"isWechat",id:"iswechat",children:[],level:2},{value:"whitelist",id:"whitelist",children:[],level:2},{value:"template",id:"template",children:[],level:2},{value:"query",id:"query",children:[],level:2},{value:"storage",id:"storage",children:[],level:2},{value:"icons",id:"icons",children:[],level:2},{value:"i18n",id:"i18n",children:[],level:2},{value:"player",id:"player",children:[],level:2},{value:"subtitle",id:"subtitle",children:[],level:2},{value:"info",id:"info",children:[],level:2},{value:"layers",id:"layers",children:[],level:2},{value:"notice",id:"notice",children:[],level:2},{value:"controls",id:"controls",children:[],level:2},{value:"contextmenu",id:"contextmenu",children:[],level:2},{value:"loading",id:"loading",children:[],level:2},{value:"mask",id:"mask",children:[],level:2},{value:"hotkey",id:"hotkey",children:[],level:2},{value:"setting",id:"setting",children:[],level:2},{value:"plugins",id:"plugins",children:[],level:2}],u={toc:m};function s(e){var t=e.components,n=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},u,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"}))),"Tip")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions."))),(0,r.kt)("h2",{id:"id"},"id"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Number"))),(0,r.kt)("p",null,"A self-inclusive number of the player instance"),(0,r.kt)("h2",{id:"option"},"option"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"After merged options"),(0,r.kt)("h2",{id:"isfocus"},"isFocus"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"Whether the player instance has been focused"),(0,r.kt)("h2",{id:"isdestroy"},"isDestroy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"Whether the player instance is destroyed"),(0,r.kt)("h2",{id:"useragent"},"userAgent"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"Equal to ",(0,r.kt)("inlineCode",{parentName:"p"},"window.navigator.userAgent")),(0,r.kt)("h2",{id:"ismobile"},"isMobile"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"Current environment mobile device"),(0,r.kt)("h2",{id:"iswechat"},"isWechat"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,r.kt)("p",null,"Whether the current environment is WeChat equipment"),(0,r.kt)("h2",{id:"whitelist"},"whitelist"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the whitelist"),(0,r.kt)("h2",{id:"template"},"template"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage player ",(0,r.kt)("inlineCode",{parentName:"p"},"HTML")),(0,r.kt)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"query")," You can find DOM elements in the current player instance, equivalent to ",(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"},"query"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"Equal to ",(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:"storage"},"storage"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage persistent storage objects"),(0,r.kt)("p",null,"The player will automatically add a json object called ",(0,r.kt)("inlineCode",{parentName:"p"},"artplayer_settings")," to the ",(0,r.kt)("inlineCode",{parentName:"p"},"localstorage")),(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},"Property"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"Get value")),(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},"Set value")),(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},"Delete value")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"clean")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Function")),(0,r.kt)("td",{parentName:"tr",align:null},"Clean value")))),(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.clean();\n")),(0,r.kt)("h2",{id:"icons"},"icons"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage player ",(0,r.kt)("inlineCode",{parentName:"p"},"icons")),(0,r.kt)("h2",{id:"i18n"},"i18n"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage player ",(0,r.kt)("inlineCode",{parentName:"p"},"i18n")),(0,r.kt)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," can get the value of the language value"),(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)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"update")," can add more languages"),(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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of the core function"),(0,r.kt)("h2",{id:"subtitle"},"subtitle"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Management subtitle object"),(0,r.kt)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"style")," can dynamically modify the subtitle style"),(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 bilingual: true,\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)("p",null,"Methods ",(0,r.kt)("inlineCode",{parentName:"p"},"switch")," can dynamically modify the subtitle url"),(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 bilingual: true,\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.switch('/assets/sample/subtitle.srt');\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"info"},"info"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage video info"),(0,r.kt)("h2",{id:"layers"},"layers"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of the layers"),(0,r.kt)("p",null,"Property show can control all layers to display"),(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)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can dynamically add a layer"),(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},"Property"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"Whether to disable the component")),(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},"The unique name of the component, used to mark the class name")),(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},"Component index, priority for display")),(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},"DOM element of the component")),(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},"Component style object")),(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},"Component click event")),(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},"Triggered after the component is mounted")),(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},"Prompt text of the component")))),(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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of prompt information"),(0,r.kt)("p",null,"Attribute ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," output custom prompt information, the default residence time is two seconds, and the new information will immediately cover the old information"),(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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of the control bar"),(0,r.kt)("p",null,"Attribute show can control if the control bar is displayed"),(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)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can dynamically add a control"),(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},"Property"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"Whether to disable the component")),(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},"The unique name of the component, used to mark the class name")),(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},"Component index, priority for display")),(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},"DOM element of the component")),(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},"Component style object")),(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},"Component click event")),(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},"Triggered after the component is mounted")),(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},"Prompt text of the component")),(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},"Location at ",(0,r.kt)("inlineCode",{parentName:"td"},"left")," or ",(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 disable: false,\n name: 'button',\n index: 10,\n position: 'right',\n html: 'Custom button1',\n tooltip: 'Custom button1',\n style: {\n color: 'red',\n },\n click: function () {\n console.log('You clicked custom button 1');\n },\n mounted: function () {\n console.log('Custom button mounting is complete 1');\n },\n });\n }, 3000);\n});\n")),(0,r.kt)("h2",{id:"contextmenu"},"contextmenu"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the contextmenu"),(0,r.kt)("p",null,"Attribute show can control if the menu is displayed"),(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)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can dynamically add a menu items"),(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},"Property"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"Whether to disable the component")),(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},"The unique name of the component, used to mark the class name")),(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},"Component index, priority for display")),(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},"DOM element of the component")),(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},"Component style object")),(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},"Component click event")),(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},"Triggered after the component is mounted")),(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},"Prompt text of the component")))),(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: 'Custom menu',\n click: function () {\n console.info('You clicked the custom menu');\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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage ",(0,r.kt)("inlineCode",{parentName:"p"},"loading")," icon"),(0,r.kt)("p",null,"Property ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," can control whether the icon in the load is displayed"),(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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of the mask layer"),(0,r.kt)("p",null,"Attributes ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," can control whether the mask layer is display"),(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"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage hotkey"),(0,r.kt)("p",null,"Methods ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can dynamically add a hotkey, the first parameter is ",(0,r.kt)("inlineCode",{parentName:"p"},"key code")," number, the second parameter is a callback function"),(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('You click A');\n });\n\n art.hotkey.add(66, () => {\n console.info('You click B');\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"}))),"Tip")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"This hotkey will take effect only after the player gets the focus (if you click on the player)."))),(0,r.kt)("h2",{id:"setting"},"setting"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage the object of the setting panel"),(0,r.kt)("p",null,"Property ",(0,r.kt)("inlineCode",{parentName:"p"},"show")," can control the setting panel to display"),(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)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can dynamically add a setting items"),(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},"Property"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(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},"Whether to disable the component")),(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},"The unique name of the component, used to mark the class name")),(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},"Component index, priority for display")),(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},"DOM element of the component")),(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},"Component style object")),(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},"Component click event")),(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},"Triggered after the component is mounted")),(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},"Prompt text of the component")))),(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 art.setting.add({\n html: 'Custom setting',\n click: function () {\n console.info('You click on custom settings');\n art.setting.show = false;\n },\n });\n});\n")),(0,r.kt)("h2",{id:"plugins"},"plugins"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Type: ",(0,r.kt)("inlineCode",{parentName:"li"},"Object"))),(0,r.kt)("p",null,"Manage plugin"),(0,r.kt)("p",null,"Method ",(0,r.kt)("inlineCode",{parentName:"p"},"add")," can be dynamically add a plugin"),(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('You can access an instance of a player in the plugin');\n return {\n name: 'myPlugin',\n something: 'Custom export properties',\n doSomething: function () {\n console.info('Custom export method');\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")))}s.isMDXComponent=!0}}]);
Reference in new issue View Git Blame Copy Permalink