"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[576],{3905:function(e,n,t){t.d(n,{Zo:function(){return c},kt:function(){return u}});var r=t(7294);function a(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 r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function p(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){a(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 l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var o=r.createContext({}),s=function(e){var n=r.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):p(p({},n),e)),t},c=function(e){var n=s(e.components);return r.createElement(o.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},m=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=s(t),u=a,h=m["".concat(o,".").concat(u)]||m[u]||d[u]||i;return t?r.createElement(h,p(p({ref:n},c),{},{components:t})):r.createElement(h,p({ref:n},c))}));function u(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var i=t.length,p=new Array(i);p[0]=m;var l={};for(var o in n)hasOwnProperty.call(n,o)&&(l[o]=n[o]);l.originalType=e,l.mdxType="string"==typeof e?e:a,p[1]=l;for(var s=2;s<i;s++)p[s]=t[s];return r.createElement.apply(null,p)}return r.createElement.apply(null,t)}m.displayName="MDXCreateElement"},5918:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return l},contentTitle:function(){return o},metadata:function(){return s},toc:function(){return c},default:function(){return m}});var r=t(7462),a=t(3366),i=(t(7294),t(3905)),p=["components"],l={title:"\u5feb\u901f\u4e0a\u624b",sidebar_position:1,slug:"/zh-cn"},o=void 0,s={unversionedId:"zh-cn/Overview",id:"zh-cn/Overview",isDocsHomePage:!1,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"}},c=[{value:"\u5b89\u88c5",id:"\u5b89\u88c5",children:[{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",children:[],level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",children:[],level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",children:[],level:3}],level:2},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",children:[{value:"\u5728 <code>Html</code> \u4f7f\u7528",id:"\u5728-html-\u4f7f\u7528",children:[],level:3},{value:"\u4e0e <code>Vue</code> \u4f7f\u7528",id:"\u4e0e-vue-\u4f7f\u7528",children:[],level:3},{value:"\u4e0e <code>React</code> \u4f7f\u7528",id:"\u4e0e-react-\u4f7f\u7528",children:[],level:3}],level:2},{value:"\u6f14\u793a",id:"\u6f14\u793a",children:[],level:2}],d={toc:c};function m(e){var n=e.components,t=(0,a.Z)(e,p);return(0,i.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,i.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer\n")),(0,i.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer\n")),(0,i.kt)("p",null,"\u7136\u540e\u52a0\u8f7d ",(0,i.kt)("inlineCode",{parentName:"p"},"artplayer")," \u6a21\u5757\uff1a"),(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:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(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,"\u7136\u540e\u4f60\u53ef\u4ee5\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"p"},"window.Artplayer")," \u8bbf\u95ee\u5230\u6784\u9020\u51fd\u6570"),(0,i.kt)("h2",{id:"\u4f7f\u7528"},"\u4f7f\u7528"),(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"}))),"\u63d0\u793a")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"\u64ad\u653e\u5668\u7684\u5c3a\u5bf8\u4f9d\u8d56\u4e8e\u5bb9\u5668 ",(0,i.kt)("inlineCode",{parentName:"p"},"container")," \u7684\u5c3a\u5bf8\uff0c\u6240\u4ee5\u4f60\u7684\u5bb9\u5668 ",(0,i.kt)("inlineCode",{parentName:"p"},"container")," \u5fc5\u987b\u662f\u6709\u5c3a\u5bf8\u7684"))),(0,i.kt)("h3",{id:"\u5728-html-\u4f7f\u7528"},"\u5728 ",(0,i.kt)("inlineCode",{parentName:"h3"},"Html")," \u4f7f\u7528"),(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    </head>\n    <body>\n        <div class="artplayer-app" style="width:400px;height:300px"></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:"\u4e0e-vue-\u4f7f\u7528"},"\u4e0e ",(0,i.kt)("inlineCode",{parentName:"h3"},"Vue")," \u4f7f\u7528"),(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"},"\u70b9\u51fb\u6253\u5f00\u5728\u7ebf\u6f14\u793a")),(0,i.kt)("p",null,"\u521b\u5efa ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer")," \u7ec4\u4ef6: ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer.vue")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'<template>\n  <div ref="artRef"></div>\n</template>\n\n<script>\nimport Artplayer from "artplayer";\n\nexport default {\n  data() {\n    return {\n      instance: null,\n    };\n  },\n  props: {\n    option: {\n      type: Object,\n      required: true,\n    },\n  },\n  mounted() {\n    this.instance = new Artplayer({\n      ...this.option,\n      container: this.$refs.artRef,\n    });\n\n    this.$nextTick(() => {\n      this.$emit("get-instance", this.instance);\n    });\n  },\n  beforeUnmount() {\n    if (this.instance && this.instance.destroy) {\n      this.instance.destroy();\n    }\n  },\n};\n<\/script>\n')),(0,i.kt)("p",null,"\u5f15\u5165 ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer.vue")," \u7ec4\u4ef6"),(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.vue";\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      },\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:"\u4e0e-react-\u4f7f\u7528"},"\u4e0e ",(0,i.kt)("inlineCode",{parentName:"h3"},"React")," \u4f7f\u7528"),(0,i.kt)("p",null,"\ud83d\udc49 ",(0,i.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/aged-fire-n74859y9rl?file=/src/index.js"},"\u70b9\u51fb\u6253\u5f00\u5728\u7ebf\u6f14\u793a")),(0,i.kt)("p",null,"\u521b\u5efa ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer")," \u7ec4\u4ef6: ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer.jsx")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport Artplayer from 'artplayer';\n\nexport default class ArtplayerReact extends React.Component {\n    constructor(props) {\n        super(props);\n        this.instance = null;\n        this.artRef = React.createRef();\n    }\n\n    componentDidMount() {\n        const { option, getInstance } = this.props;\n        this.instance = new Artplayer({\n            ...option,\n            container: this.artRef.current,\n        });\n\n        if (getInstance && typeof getInstance === 'function') {\n            getInstance(this.instance);\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.instance && this.instance.destroy) {\n            this.instance.destroy();\n        }\n    }\n\n    render() {\n        const { option, getInstance, ...rest } = this.props;\n        return React.createElement('div', {\n            ref: this.artRef,\n            ...rest,\n        });\n    }\n}\n")),(0,i.kt)("p",null,"\u5f15\u5165 ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer.jsx")," \u7ec4\u4ef6"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'import Artplayer from "./Artplayer.jsx";\n\nfunction App() {\n  return (\n    <Artplayer\n      option={{\n        url: "https://artplayer.org/assets/sample/video.mp4",\n      }}\n      style={{\n        width: "600px",\n        height: "400px",\n      }}\n      getInstance={ins => console.log(ins)}\n    />\n  );\n}\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"}))),"\u63d0\u793a")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"Vue")," \u548c ",(0,i.kt)("inlineCode",{parentName:"p"},"React")," \u91cc\u4fee\u6539 ",(0,i.kt)("inlineCode",{parentName:"p"},"option")," \u4e0d\u80fd\u52a8\u6001\u4fee\u6539 ",(0,i.kt)("inlineCode",{parentName:"p"},"Artplayer")," \u5b9e\u4f8b"))),(0,i.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(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"}))),"\u63d0\u793a")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"\u672c\u6587\u6863\u91cc\uff0c\u901a\u8fc7\u70b9\u51fb\u4ee3\u7801\u5757\u524d\u7684 ",(0,i.kt)("inlineCode",{parentName:"p"},"Run Code")," \u6309\u94ae\uff0c\u53ef\u4ee5\u9a6c\u4e0a\u8fdb\u5165\u6f14\u793a"))),(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")))}m.isMDXComponent=!0}}]);