---
title: 快速上手
sidebar_position: 1
slug: /zh-cn
---
## 安装
### 通过 `npm` 安装：
```bash
$ npm install artplayer
```
### 通过 `yarn` 安装：
```bash
$ yarn add artplayer
```
然后加载 `artplayer` 模块：
```js
// ES6
import Artplayer from 'artplayer';
// CommonJS
const Artplayer = require('artplayer');
```
### 通过 `script` 安装：
```html
```
然后你可以通过 `window.Artplayer` 访问到构造函数
## 使用
:::danger 提示
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
:::
### 在 `Html` 使用
```html
ArtPlayer Demo
```
### 与 `Vue` 使用
👉 [点击打开在线演示](https://codesandbox.io/s/artplayer-vue-demo-3lz7m?file=/src/App.vue)
创建 `Artplayer` 组件: `Artplayer.vue`
```js
```
引入 `Artplayer.vue` 组件
```jsx
```
### 与 `React` 使用
👉 [点击打开在线演示](https://codesandbox.io/s/aged-fire-n74859y9rl?file=/src/index.js)
创建 `Artplayer` 组件: `Artplayer.jsx`
```jsx
import React from 'react';
import Artplayer from 'artplayer';
export default class ArtplayerReact extends React.Component {
constructor(props) {
super(props);
this.instance = null;
this.artRef = React.createRef();
}
componentDidMount() {
const { option, getInstance } = this.props;
this.instance = new Artplayer({
...option,
container: this.artRef.current,
});
if (getInstance && typeof getInstance === 'function') {
getInstance(this.instance);
}
}
componentWillUnmount() {
if (this.instance && this.instance.destroy) {
this.instance.destroy();
}
}
render() {
const { option, getInstance, ...rest } = this.props;
return React.createElement('div', {
ref: this.artRef,
...rest,
});
}
}
```
引入 `Artplayer.jsx` 组件
```jsx
import Artplayer from "./Artplayer.jsx";
function App() {
return (
console.log(ins)}
/>
);
}
```
:::caution 提示
在 `Vue` 和 `React` 里修改 `option` 不能动态修改 `Artplayer` 实例
:::
## 演示
:::tip 提示
本文档里，通过点击代码块前的 `Run Code` 按钮，可以马上进入演示
:::
----------------------------------------------
▶ Run Code
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
```