---
title: 快速上手
sidebar_position: 1
slug: /zh-cn
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
## 安装
```bash
npm install artplayer
```
```js showLineNumbers
import Artplayer from 'artplayer';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
```
```bash
yarn add artplayer
```
```js showLineNumbers
import Artplayer from 'artplayer';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
```
```html showLineNumbers
```
```js showLineNumbers
const art = new window.Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
```
## 使用
:::danger 提示
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
:::
### 在 `Html` 使用
```html showLineNumbers title="index.html"
ArtPlayer Demo
```
### 在 `Vue.js`、`Nuxt.js` 使用
🚀 [artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue3.js)
🚀 [artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)
```js showLineNumbers title="Artplayer.vue"
```
```js showLineNumbers title="App.vue"
```
### 在 `React.js`、`Next.js` 使用
🚀 [artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
🚀 [artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
```jsx showLineNumbers title="ArtPlayer.jsx"
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function Player({ option, getInstance, ...rest }) {
const artRef = useRef();
useEffect(() => {
const art = new Artplayer({
...option,
container: artRef.current,
});
if (getInstance && typeof getInstance === 'function') {
getInstance(art);
}
return () => {
if (art && art.destroy) {
art.destroy(false);
}
};
}, []);
return ;
}
```
```jsx showLineNumbers title="App.jsx"
import React from 'react';
import Artplayer from './ArtPlayer';
function App() {
return (
);
}
export default App;
```