"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[576],{9278:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return m}});var r=n(9301);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),c=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(o.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=c(n),m=a,h=d["".concat(o,".").concat(m)]||d[m]||u[m]||l;return n?r.createElement(h,p(p({ref:t},s),{},{components:n})):r.createElement(h,p({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,p=new Array(l);p[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:a,p[1]=i;for(var c=2;c<l;c++)p[c]=n[c];return r.createElement.apply(null,p)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},7962:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return o},default:function(){return m},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return u}});var r=n(7145),a=n(4736),l=(n(9301),n(9278)),p=["components"],i={title:"\u5feb\u901f\u4e0a\u624b",sidebar_position:1,slug:"/zh-cn"},o=void 0,c={unversionedId:"zh-cn/Overview",id:"zh-cn/Overview",title:"\u5feb\u901f\u4e0a\u624b",description:"\u5b89\u88c5",source:"@site/docs/zh-cn/Overview.md",sourceDirName:"zh-cn",slug:"/zh-cn",permalink:"/document/zh-cn",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"\u5feb\u901f\u4e0a\u624b",sidebar_position:1,slug:"/zh-cn"},sidebar:"zh-cn",next:{title:"\u57fa\u7840\u53c2\u6570",permalink:"/document/zh-cn/options"}},s={},u=[{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"\u5728 <code>Html</code> \u4f7f\u7528",id:"\u5728-html-\u4f7f\u7528",level:3},{value:"\u4e0e <code>Vue.js</code> \u4f7f\u7528",id:"\u4e0e-vuejs-\u4f7f\u7528",level:3},{value:"\u4e0e <code>React.js</code> \u4f7f\u7528",id:"\u4e0e-reactjs-\u4f7f\u7528",level:3},{value:"\u4e0e <code>Next.js</code> \u4f7f\u7528",id:"\u4e0e-nextjs-\u4f7f\u7528",level:3},{value:"\u4e0e <code>Nuxt.js</code> \u4f7f\u7528",id:"\u4e0e-nuxtjs-\u4f7f\u7528",level:3}],d={toc:u};function m(e){var t=e.components,n=(0,a.Z)(e,p);return(0,l.kt)("wrapper",(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,l.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer\n")),(0,l.kt)("p",null,"\u7136\u540e\u52a0\u8f7d ",(0,l.kt)("inlineCode",{parentName:"p"},"artplayer")," \u6a21\u5757\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"// ES6\nimport Artplayer from 'artplayer';\n\n// CommonJS\nconst Artplayer = require('artplayer');\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.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,l.kt)("p",null,"\u7136\u540e\u4f60\u53ef\u4ee5\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"window.Artplayer")," \u8bbf\u95ee\u5230\u6784\u9020\u51fd\u6570"),(0,l.kt)("h2",{id:"\u4f7f\u7528"},"\u4f7f\u7528"),(0,l.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"\u63d0\u793a")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"\u64ad\u653e\u5668\u7684\u5c3a\u5bf8\u4f9d\u8d56\u4e8e\u5bb9\u5668 ",(0,l.kt)("inlineCode",{parentName:"p"},"container")," \u7684\u5c3a\u5bf8\uff0c\u6240\u4ee5\u4f60\u7684\u5bb9\u5668 ",(0,l.kt)("inlineCode",{parentName:"p"},"container")," \u5fc5\u987b\u662f\u6709\u5c3a\u5bf8\u7684"))),(0,l.kt)("h3",{id:"\u5728-html-\u4f7f\u7528"},"\u5728 ",(0,l.kt)("inlineCode",{parentName:"h3"},"Html")," \u4f7f\u7528"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<!DOCTYPE html>\n<html>\n    <head>\n        <title>ArtPlayer Demo</title>\n        <meta charset="UTF-8" />\n        <style>\n          .artplayer-app {\n              width: 400px;\n              height: 300px;\n          }\n        </style>\n    </head>\n    <body>\n        <div class="artplayer-app"></div>\n        <script src="path/to/artplayer.js"><\/script>\n        <script>\n            var art = new Artplayer({\n                container: \'.artplayer-app\',\n                url: \'/assets/sample/video.mp4\',\n            });\n        <\/script>\n    </body>\n</html>\n')),(0,l.kt)("h3",{id:"\u4e0e-vuejs-\u4f7f\u7528"},"\u4e0e ",(0,l.kt)("inlineCode",{parentName:"h3"},"Vue.js")," \u4f7f\u7528"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue.js"},"artplayer-template/vue.js")),(0,l.kt)("h3",{id:"\u4e0e-reactjs-\u4f7f\u7528"},"\u4e0e ",(0,l.kt)("inlineCode",{parentName:"h3"},"React.js")," \u4f7f\u7528"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js"},"artplayer-template/react.js")),(0,l.kt)("h3",{id:"\u4e0e-nextjs-\u4f7f\u7528"},"\u4e0e ",(0,l.kt)("inlineCode",{parentName:"h3"},"Next.js")," \u4f7f\u7528"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js"},"artplayer-template/next.js")),(0,l.kt)("h3",{id:"\u4e0e-nuxtjs-\u4f7f\u7528"},"\u4e0e ",(0,l.kt)("inlineCode",{parentName:"h3"},"Nuxt.js")," \u4f7f\u7528"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js"},"artplayer-template/nuxt.js")))}m.isMDXComponent=!0}}]);