---
title: Quick start
sidebar_position: 1
slug: /
---
## Install
### Install by `npm`:
```bash
$ npm install artplayer
```
### Install by `yarn`:
```bash
$ yarn add artplayer
```
Then load the `Artplayer` module:
```js
// ES6
import Artplayer from 'artplayer';
// CommonJS
const Artplayer = require('artplayer');
```
### Install by `script`:
```html
```
Then you can access the constructor via `window.ArtPlayer`
## Use
:::danger Tip
The size of the player depends on the size of the `container`, so your `container` must have a size.
:::
### Use in `Html`
```html
ArtPlayer Demo
```
### Use in `Vue`
👉 [Click to open an online demo](https://codesandbox.io/s/artplayer-vue-demo-3lz7m?file=/src/App.vue)
```jsx
```
### Use in `React`
👉 [Click to open an online demo](https://codesandbox.io/s/artplayer-react-demo-n74859y9rl?file=/src/index.js)
```jsx
import React from "react";
import ReactDOM from "react-dom";
import Artplayer from "artplayer/examples/react/Artplayer";
function App() {
return (
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
:::caution Tip
Modifying `option` not dynamically modified ArtPlayer instances in `Vue` and `React`
:::
## Demo
:::tip Tip
In this document, by clicking the `Run Code` button before the code block, you can immediately enter the demo.
:::
----------------------------------------------
â–¶ Run Code
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
```