update docs

docs/document/assets/js/0a29ddce.941e5cf9.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[176],{3905:function(e,n,t){t.d(n,{Zo:function(){return c},kt:function(){return u}});var a=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=a.createContext({}),s=function(e){var n=a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},c=function(e){var n=s(e.components);return a.createElement(p.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),m=s(t),u=r,h=m["".concat(p,".").concat(u)]||m[u]||d[u]||i;return t?a.createElement(h,l(l({ref:n},c),{},{components:t})):a.createElement(h,l({ref:n},c))}));function u(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,l=new Array(i);l[0]=m;var o={};for(var p in n)hasOwnProperty.call(n,p)&&(o[p]=n[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,l[1]=o;for(var s=2;s<i;s++)l[s]=t[s];return a.createElement.apply(null,l)}return a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},1418:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return c},default:function(){return m}});var a=t(7462),r=t(3366),i=(t(7294),t(3905)),l=["components"],o={title:"Quick start",sidebar_position:1,slug:"/"},p=void 0,s={unversionedId:"en/Overview",id:"en/Overview",isDocsHomePage:!1,title:"Quick start",description:"Install",source:"@site/docs/en/Overview.md",sourceDirName:"en",slug:"/",permalink:"/document/",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Quick start",sidebar_position:1,slug:"/"},sidebar:"en",next:{title:"Basic options",permalink:"/document/options"}},c=[{value:"Install",id:"install",children:[{value:"Install by <code>npm</code>:",id:"install-by-npm",children:[],level:3},{value:"Install by <code>yarn</code>:",id:"install-by-yarn",children:[],level:3},{value:"Install by <code>script</code>:",id:"install-by-script",children:[],level:3}],level:2},{value:"Use",id:"use",children:[{value:"Use in <code>Html</code>",id:"use-in-html",children:[],level:3},{value:"Use in <code>Vue</code>",id:"use-in-vue",children:[],level:3},{value:"Use in <code>React</code>",id:"use-in-react",children:[],level:3}],level:2},{value:"Demo",id:"demo",children:[],level:2}],d={toc:c};function m(e){var n=e.components,t=(0,r.Z)(e,l);return(0,i.kt)("wrapper",(0,a.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"install"},"Install"),(0,i.kt)("h3",{id:"install-by-npm"},"Install by ",(0,i.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer\n")),(0,i.kt)("h3",{id:"install-by-yarn"},"Install by ",(0,i.kt)("inlineCode",{parentName:"h3"},"yarn"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer\n")),(0,i.kt)("p",null,"Then load the ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer")," module:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"// ES6\nimport Artplayer from 'artplayer';\n\n// CommonJS\nconst Artplayer = require('artplayer');\n")),(0,i.kt)("h3",{id:"install-by-script"},"Install by ",(0,i.kt)("inlineCode",{parentName:"h3"},"script"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- locally --\x3e\n<script src="path/to/artplayer.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"><\/script>\n\n\x3c!-- unpkg --\x3e\n<script src="https://unpkg.com/artplayer/dist/artplayer.js"><\/script>\n')),(0,i.kt)("p",null,"Then you can access the constructor via ",(0,i.kt)("inlineCode",{parentName:"p"},"window.Line truncated