"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[176],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return u}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(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,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),m=s(n),u=r,v=m["".concat(p,".").concat(u)]||m[u]||d[u]||i;return n?a.createElement(v,l(l({ref:t},c),{},{components:n})):a.createElement(v,l({ref:t},c))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,l[1]=o;for(var s=2;s<i;s++)l[s]=n[s];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},1418:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return p},default:function(){return u},frontMatter:function(){return o},metadata:function(){return s},toc:function(){return d}});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),l=["components"],o={title:"Quick start",sidebar_position:1,slug:"/"},p=void 0,s={unversionedId:"en/Overview",id:"en/Overview",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={},d=[{value:"Install",id:"install",level:2},{value:"Install by <code>npm</code>:",id:"install-by-npm",level:3},{value:"Install by <code>yarn</code>:",id:"install-by-yarn",level:3},{value:"Install by <code>script</code>:",id:"install-by-script",level:3},{value:"Use",id:"use",level:2},{value:"Use in <code>Html</code>",id:"use-in-html",level:3},{value:"Use in <code>Vue</code>",id:"use-in-vue",level:3},{value:"Use in <code>React</code>",id:"use-in-react",level:3},{value:"Demo",id:"demo",level:2}],m={toc:d};function u(e){var t=e.components,n=(0,r.Z)(e,l);return(0,i.kt)("wrapper",(0,a.Z)({},m,n,{components:t,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.ArtPlayer")),(0,i.kt)("h2",{id:"use"},"Use"),(0,i.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,i.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"}))),"Tip")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"The size of the player depends on the size of the ",(0,i.kt)("inlineCode",{parentName:"p"},"container"),", so your ",(0,i.kt)("inlineCode",{parentName:"p"},"container")," must have a size."))),(0,i.kt)("h3",{id:"use-in-html"},"Use in ",(0,i.kt)("inlineCode",{parentName:"h3"},"Html")),(0,i.kt)("pre",null,(0,i.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,i.kt)("h3",{id:"use-in-vue"},"Use in ",(0,i.kt)("inlineCode",{parentName:"h3"},"Vue")),(0,i.kt)("p",null,"\ud83d\udc49 ",(0,i.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/artplayer-vue-demo-3lz7m?file=/src/App.vue"},"Click to open an online demo")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'<template>\n  <Artplayer @get-instance="getInstance" :option="option" :style="style" />\n</template>\n\n<script>\nimport Artplayer from "artplayer/examples/vue/Artplayer";\n\nexport default {\n  data() {\n    return {\n      option: {\n        url: "https://artplayer.org/assets/sample/video.mp4",\n      },\n      style: {\n        width: "600px",\n        height: "400px",\n        margin: "60px auto 0",\n      },\n    };\n  },\n  components: {\n    Artplayer,\n  },\n  methods: {\n    getInstance(art) {\n      console.log(art);\n    },\n  },\n};\n<\/script>\n')),(0,i.kt)("h3",{id:"use-in-react"},"Use in ",(0,i.kt)("inlineCode",{parentName:"h3"},"React")),(0,i.kt)("p",null,"\ud83d\udc49 ",(0,i.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/artplayer-react-demo-n74859y9rl?file=/src/index.js"},"Click to open an online demo")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'import React from "react";\nimport ReactDOM from "react-dom";\nimport Artplayer from "artplayer/examples/react/Artplayer";\n\nfunction App() {\n  return (\n    <div>\n      <Artplayer\n        option={{\n          url: "https://artplayer.org/assets/sample/video.mp4"\n        }}\n        style={{\n          width: "600px",\n          height: "400px",\n          margin: "60px auto 0"\n        }}\n        getInstance={(art) => console.log(art)}\n      />\n    </div>\n  );\n}\n\nconst rootElement = document.getElementById("root");\nReactDOM.render(<App />, rootElement);\n')),(0,i.kt)("div",{className:"admonition admonition-caution alert alert--warning"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},(0,i.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))),"Tip")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"Modifying ",(0,i.kt)("inlineCode",{parentName:"p"},"option")," not dynamically modified ArtPlayer instances in ",(0,i.kt)("inlineCode",{parentName:"p"},"Vue")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"React")))),(0,i.kt)("h2",{id:"demo"},"Demo"),(0,i.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,i.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,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"In this document, by clicking the ",(0,i.kt)("inlineCode",{parentName:"p"},"Run Code")," button before the code block, you can immediately enter the demo."))),(0,i.kt)("hr",null),(0,i.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n")))}u.isMDXComponent=!0}}]);